sonance-brand-mcp 1.0.0

package/dist/assets/BRAND_GUIDELINES.md

@@ -0,0 +1,361 @@
+# Sonance Brand Family - AI Context Guide
+
+> **Purpose**: This document is optimized for AI/LLM consumption. Use it to generate brand-compliant UI components, websites, and applications for Sonance, IPORT, and Blaze Audio.
+
+---
+
+## Quick Reference
+
+| Brand | Primary Color | Accent Color | Theme |
+|-------|---------------|--------------|-------|
+| **Sonance** | Charcoal `#333F48` | Cyan "The Beam" `#00D3C8` | Light preferred |
+| **Sonance Foundation** | Charcoal `#333F48` | Green `#00B2A9` | Light preferred |
+| **IPORT** | Black `#0E1114` | Orange `#FC4C02` | Dark preferred |
+| **Blaze Audio** | Black `#1A1A1C` | Blue `#00A3E1` | Dark preferred |
+
+**Font**: Montserrat (all brands)
+
+---
+
+## Typography
+
+### Font Family
+```css
+font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+```
+
+**Google Fonts Import**:
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+```
+
+### Font Weights
+| Weight | Name | Usage |
+|--------|------|-------|
+| 300 | Light | Headlines, display text |
+| 400 | Regular | Body text, paragraphs |
+| 500 | Medium | Emphasis, subheadings |
+| 600 | Semibold | Strong emphasis |
+| 700 | Bold | CTAs, buttons (small text only) |
+
+### Typography Rules
+
+**Headlines**:
+- Use Light (300) or Medium (500) weight
+- **Never use bold for large display text**
+- Letter-spacing: `-0.02em` for display sizes
+- Line-height: `1.2`
+
+**Body Text**:
+- Use Regular (400) weight
+- Line-height: `1.6` to `1.75`
+- Max-width: `65-75` characters per line
+
+**All Caps Text**:
+- When using all caps, apply letter-spacing: `0.08em` to `0.1em`
+- Use for: headlines, sub headlines, product names, labels
+- **Never apply tracking to long-form body copy**
+
+---
+
+## Sonance Brand
+
+### Color Palette
+
+| Color | Hex | CSS Variable | Tailwind Class | Usage |
+|-------|-----|--------------|----------------|-------|
+| Charcoal | `#333F48` | `--sonance-charcoal` | `bg-sonance-charcoal` | Primary brand color, text |
+| The Beam (Cyan) | `#00D3C8` | `--sonance-blue` | `bg-sonance-blue` | Accent, highlights |
+| Light Gray | `#D9D9D6` | `--sonance-light-gray` | `bg-sonance-light-gray` | Backgrounds, borders |
+| White | `#FFFFFF` | `--sonance-white` | `bg-sonance-white` | Backgrounds |
+| Black | `#000000` | `--sonance-black` | `bg-sonance-black` | Text on light backgrounds |
+
+**Print Specifications** (for reference):
+- Charcoal: Pantone 7545 C, CMYK 72/51/39/36, RAL 7024
+- The Beam: Pantone 3262 C, CMYK 79/0/32/0
+
+### Gray Scale (derived from Charcoal)
+| Level | Hex | CSS Variable |
+|-------|-----|--------------|
+| 50 | `#f8f9fa` | `--sonance-gray-50` |
+| 100 | `#f0f2f3` | `--sonance-gray-100` |
+| 200 | `#D9D9D6` | `--sonance-gray-200` |
+| 300 | `#b8bfc4` | `--sonance-gray-300` |
+| 400 | `#8f999f` | `--sonance-gray-400` |
+| 500 | `#6b7780` | `--sonance-gray-500` |
+| 600 | `#515c64` | `--sonance-gray-600` |
+| 700 | `#424c54` | `--sonance-gray-700` |
+| 800 | `#3a444c` | `--sonance-gray-800` |
+| 900 | `#333F48` | `--sonance-gray-900` |
+
+### Brand Pillars
+
+1. **Sound Quality & Heritage** - "40+ years of sonic innovation"
+2. **Designed to Disappear** - Invisible integration is core
+3. **Partnership Excellence** - We succeed when our partners succeed
+4. **Premium Experience** - Every touchpoint feels high-end
+
+### Logo Usage
+
+- Use 2-color logo (with cyan Beam) for primary applications
+- Use reverse (white) logo on dark backgrounds
+- Minimum clear space: equal to cap height of logo
+- Minimum width: 120px (digital), 1 inch (print)
+
+**Don'ts**:
+- Never colorize, rotate, stretch, or add strokes to the logo
+- Never place on busy backgrounds
+- Never modify proportions
+
+---
+
+## IPORT Brand
+
+### Color Palette
+
+| Color | Hex | CSS Variable | Tailwind Class | Usage |
+|-------|-----|--------------|----------------|-------|
+| Orange | `#FC4C02` | `--iport-orange` | `bg-iport-orange` | Primary accent, CTAs |
+| Black | `#0E1114` | `--iport-black` | `bg-iport-black` | Text, headers |
+| Dark | `#0F161D` | `--iport-dark` | `bg-iport-dark` | Page backgrounds |
+| Dark Gray | `#1C1E20` | `--iport-dark-gray` | `bg-iport-dark-gray` | Card backgrounds |
+| Medium Gray | `#25282A` | `--iport-medium-gray` | `bg-iport-medium-gray` | Secondary surfaces |
+| Gray | `#3A3D3F` | `--iport-gray` | `bg-iport-gray` | Borders, dividers |
+| Light Gray | `#CED6DB` | `--iport-light-gray` | `bg-iport-light-gray` | Secondary text |
+| Off White | `#F2F2F2` | `--iport-off-white` | `bg-iport-off-white` | Highlights |
+| White | `#FFFFFF` | `--iport-white` | `bg-iport-white` | Primary text on dark |
+
+### Design Guidelines
+
+- **Theme**: Dark UI preferred
+- **Accent**: Orange `#FC4C02` for CTAs, highlights, interactive elements
+- **Text**: White on dark backgrounds
+- **Surfaces**: Use dark grays for layered depth
+
+### Example Dark Theme Setup
+```css
+body {
+  background-color: #0F161D;  /* iport-dark */
+  color: #FFFFFF;             /* iport-white */
+}
+.card {
+  background-color: #1C1E20;  /* iport-dark-gray */
+  border-color: #3A3D3F;      /* iport-gray */
+}
+.button-primary {
+  background-color: #FC4C02;  /* iport-orange */
+  color: #FFFFFF;
+}
+```
+
+---
+
+## Blaze Audio Brand
+
+### Color Palette
+
+| Color | Hex | CSS Variable | Tailwind Class | Usage |
+|-------|-----|--------------|----------------|-------|
+| Blue | `#00A3E1` | `--blaze-blue` | `bg-blaze-blue` | Primary accent |
+| Red | `#C02B0A` | `--blaze-red` | `bg-blaze-red` | Secondary accent, alerts |
+| Black | `#1A1A1C` | `--blaze-black` | `bg-blaze-black` | Text |
+| Darkest | `#0A0B0F` | `--blaze-darkest` | `bg-blaze-darkest` | Deep backgrounds |
+| Dark Gray | `#28282B` | `--blaze-dark-gray` | `bg-blaze-dark-gray` | Page backgrounds |
+| Gray | `#313131` | `--blaze-gray` | `bg-blaze-gray` | Cards, surfaces |
+| Medium Gray | `#575757` | `--blaze-medium-gray` | `bg-blaze-medium-gray` | Borders |
+| Light Gray | `#838383` | `--blaze-light-gray` | `bg-blaze-light-gray` | Secondary text |
+| Off White | `#F8F8F8` | `--blaze-off-white` | `bg-blaze-off-white` | Highlights |
+| White | `#FFFFFF` | `--blaze-white` | `bg-blaze-white` | Primary text on dark |
+
+### Design Guidelines
+
+- **Theme**: Dark UI preferred (similar to IPORT)
+- **Primary Accent**: Blue `#00A3E1` for CTAs, links, highlights
+- **Secondary Accent**: Red `#C02B0A` for alerts, warnings, emphasis
+- **Text**: White on dark backgrounds
+
+### Example Dark Theme Setup
+```css
+body {
+  background-color: #28282B;  /* blaze-dark-gray */
+  color: #FFFFFF;             /* blaze-white */
+}
+.card {
+  background-color: #313131;  /* blaze-gray */
+  border-color: #575757;      /* blaze-medium-gray */
+}
+.button-primary {
+  background-color: #00A3E1;  /* blaze-blue */
+  color: #FFFFFF;
+}
+.alert-error {
+  background-color: #C02B0A;  /* blaze-red */
+}
+```
+
+---
+
+## Semantic Theme Variables
+
+For building theme-aware components, use these semantic variables:
+
+### Backgrounds
+| Variable | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| `--background` | `#FFFFFF` | `#1a1f24` |
+| `--background-secondary` | `#f8f9fa` | `#242a31` |
+| `--background-tertiary` | `#f0f2f3` | `#2d343c` |
+| `--card` | `#FFFFFF` | `#242a31` |
+
+### Text / Foreground
+| Variable | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| `--foreground` | `#333F48` | `#FFFFFF` |
+| `--foreground-secondary` | `#515c64` | `#D9D9D6` |
+| `--foreground-muted` | `#6b7780` | `#8f999f` |
+
+### Interactive
+| Variable | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| `--primary` | `#333F48` | `#FFFFFF` |
+| `--primary-foreground` | `#FFFFFF` | `#333F48` |
+| `--border` | `#D9D9D6` | `#3a444c` |
+
+### Feedback
+| Variable | Usage |
+|----------|-------|
+| `--success` | Success states, confirmations |
+| `--error` | Errors, destructive actions |
+| `--warning` | Warnings, caution states |
+| `--info` | Informational messages |
+
+---
+
+## Component Patterns
+
+### Buttons
+
+**Primary Button** (Sonance):
+```jsx
+<button className="bg-sonance-charcoal text-white px-6 py-3 text-sm font-medium tracking-wide uppercase hover:bg-sonance-gray-800 transition-colors">
+  Learn More
+</button>
+```
+
+**Primary Button** (IPORT):
+```jsx
+<button className="bg-iport-orange text-white px-6 py-3 text-sm font-medium tracking-wide uppercase hover:opacity-90 transition-opacity">
+  Shop Now
+</button>
+```
+
+**Primary Button** (Blaze):
+```jsx
+<button className="bg-blaze-blue text-white px-6 py-3 text-sm font-medium tracking-wide uppercase hover:opacity-90 transition-opacity">
+  Explore
+</button>
+```
+
+### Cards
+
+**Light Theme Card**:
+```jsx
+<div className="bg-white border border-sonance-light-gray rounded-sm p-6 shadow-sm">
+  <h3 className="text-lg font-medium text-sonance-charcoal">Card Title</h3>
+  <p className="text-foreground-secondary mt-2">Card content...</p>
+</div>
+```
+
+**Dark Theme Card** (IPORT/Blaze):
+```jsx
+<div className="bg-iport-dark-gray border border-iport-gray rounded-sm p-6">
+  <h3 className="text-lg font-medium text-white">Card Title</h3>
+  <p className="text-iport-light-gray mt-2">Card content...</p>
+</div>
+```
+
+### Section Headers
+
+```jsx
+<div className="mb-8">
+  <p className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+    Category Label
+  </p>
+  <h2 className="text-4xl font-light text-foreground tracking-tight">
+    Section Headline
+  </h2>
+  <p className="text-lg text-foreground-secondary mt-4 max-w-2xl">
+    Supporting description text that provides context.
+  </p>
+</div>
+```
+
+---
+
+## Photography Guidelines
+
+### Product Photography
+- Clean, simple backgrounds (white or gradient)
+- Products should "float" in space
+- Show shadow and depth but avoid clutter
+- Use natural light aesthetic
+
+### Lifestyle Photography
+- Rich, inviting scenes
+- Premium architectural settings
+- Products integrated naturally (invisible aesthetic)
+- Warm, sophisticated color grading
+
+**Don'ts**:
+- No cartoons, illustrations, or non-photographic imagery
+- No busy or cluttered backgrounds
+- No artificial-looking lighting
+- No low-resolution images
+
+---
+
+## Quick CSS Copy-Paste
+
+### Minimal Brand Setup
+```css
+:root {
+  /* Sonance Core */
+  --sonance-charcoal: #333F48;
+  --sonance-blue: #00D3C8;
+  --sonance-light-gray: #D9D9D6;
+  
+  /* IPORT Core */
+  --iport-orange: #FC4C02;
+  --iport-black: #0E1114;
+  --iport-dark: #0F161D;
+  
+  /* Blaze Core */
+  --blaze-blue: #00A3E1;
+  --blaze-red: #C02B0A;
+  --blaze-dark-gray: #28282B;
+  
+  /* Typography */
+  --font-primary: 'Montserrat', sans-serif;
+}
+```
+
+---
+
+## AI Instructions Summary
+
+When generating UI for these brands:
+
+1. **Always use Montserrat** font family
+2. **Check which brand** is being targeted (Sonance, IPORT, or Blaze)
+3. **Apply the correct theme**:
+   - Sonance: Light theme, charcoal + cyan accents
+   - IPORT: Dark theme, dark grays + orange accents
+   - Blaze: Dark theme, dark grays + blue/red accents
+4. **Use semantic classes** (`bg-primary`, `text-foreground`) when possible
+5. **Headlines**: Light weight, negative tracking
+6. **Body text**: Regular weight, generous line height
+7. **All caps**: Apply letter-spacing (tracking)
+8. **Buttons**: Uppercase, medium weight, tracked
+9. **Cards**: Minimal borders, subtle shadows
+10. **Spacing**: Generous whitespace, "breathable" layouts
+

package/dist/assets/components/accordion.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { forwardRef, createContext, useContext, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface AccordionContextValue {
+  openItems: string[];
+  toggleItem: (value: string) => void;
+  type: "single" | "multiple";
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+interface AccordionProps {
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function Accordion({
+  type = "single",
+  defaultValue,
+  className,
+  children,
+}: AccordionProps) {
+  const [openItems, setOpenItems] = useState<string[]>(() => {
+    if (!defaultValue) return [];
+    return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+  });
+
+  const toggleItem = (value: string) => {
+    setOpenItems((prev) => {
+      if (type === "single") {
+        return prev.includes(value) ? [] : [value];
+      }
+      return prev.includes(value)
+        ? prev.filter((v) => v !== value)
+        : [...prev, value];
+    });
+  };
+
+  return (
+    <AccordionContext.Provider value={{ openItems, toggleItem, type }}>
+      <div className={cn("w-full divide-y divide-border border-y border-border", className)}>
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+}
+
+interface AccordionItemProps {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const AccordionItemContext = createContext<{ value: string; isOpen: boolean } | null>(null);
+
+export function AccordionItem({ value, className, children }: AccordionItemProps) {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error("AccordionItem must be used within Accordion");
+
+  const isOpen = context.openItems.includes(value);
+
+  return (
+    <AccordionItemContext.Provider value={{ value, isOpen }}>
+      <div className={cn("", className)} data-state={isOpen ? "open" : "closed"}>
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
+  );
+}
+
+export const AccordionTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+  const accordionContext = useContext(AccordionContext);
+  const itemContext = useContext(AccordionItemContext);
+
+  if (!accordionContext || !itemContext) {
+    throw new Error("AccordionTrigger must be used within AccordionItem");
+  }
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={() => accordionContext.toggleItem(itemContext.value)}
+      className={cn(
+        "flex w-full items-center justify-between py-4 text-left font-medium text-foreground",
+        "transition-colors hover:text-foreground-secondary",
+        className
+      )}
+      aria-expanded={itemContext.isOpen}
+      {...props}
+    >
+      {children}
+      <ChevronDown
+        className={cn(
+          "h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-200",
+          itemContext.isOpen && "rotate-180"
+        )}
+      />
+    </button>
+  );
+});
+
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  const itemContext = useContext(AccordionItemContext);
+
+  if (!itemContext) {
+    throw new Error("AccordionContent must be used within AccordionItem");
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "overflow-hidden text-sm text-foreground-secondary",
+        "transition-all duration-200",
+        itemContext.isOpen ? "pb-4" : "h-0",
+        className
+      )}
+      aria-hidden={!itemContext.isOpen}
+      {...props}
+    >
+      {itemContext.isOpen && children}
+    </div>
+  );
+});
+
+AccordionContent.displayName = "AccordionContent";
+

package/dist/assets/components/alert.tsx

@@ -0,0 +1,78 @@
+import { forwardRef } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative flex w-full items-start gap-4 border p-4 transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-background-secondary text-foreground",
+        success: "border-success/30 bg-success-light text-success",
+        error: "border-error/30 bg-error-light text-error",
+        warning: "border-warning/30 bg-warning-light text-warning",
+        info: "border-info/30 bg-info-light text-info",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const iconMap = {
+  default: Info,
+  success: CheckCircle,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+};
+
+interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  title?: string;
+  onClose?: () => void;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = "default", title, children, onClose, ...props }, ref) => {
+    const Icon = iconMap[variant || "default"];
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        <Icon className="h-5 w-5 shrink-0" />
+        <div className="flex-1">
+          {title && (
+            <h5 className="mb-1 font-medium leading-none tracking-tight">
+              {title}
+            </h5>
+          )}
+          {children && (
+            <div className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
+              {children}
+            </div>
+          )}
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="shrink-0 rounded-sm p-1 opacity-70 transition-opacity hover:opacity-100"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Alert.displayName = "Alert";
+