@olwiba/ui 0.0.37 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.37",
+  "version": "0.0.41",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -9,7 +9,12 @@
   "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./email": {
+      "import": "./dist/email/index.js",
+      "types": "./dist/email/index.d.ts"
     }
   },
   "files": [
@@ -44,7 +49,7 @@
   },
   "peerDependencies": {
     "@content-collections/mdx": ">=0.2.0",
-    "@olwiba/cn": ">=0.1.2",
+    "@olwiba/cn": ">=0.1.16",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
@@ -55,7 +60,7 @@
   },
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
-    "@olwiba/cn": "^0.1.15",
+    "@olwiba/cn": "0.1.17",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/AppShell.tsx

@@ -219,7 +219,11 @@ function ShellSidebar({
                 href: brand.href ?? '#',
                 children: (
                   <>
-                    {brand.logo ?? (
+                    {brand.logo ? (
+                      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                        {brand.logo}
+                      </span>
+                    ) : (
                       <span className="flex size-4 shrink-0 items-center justify-center text-sm font-semibold">
                         {fallbackLogo}
                       </span>

package/src/blog/ChangelogCard.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import { Badge, cn } from '@olwiba/cn';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface ChangelogCardProps {
+  title: string;
+  summary: string;
+  date: string;
+  slug: string;
+  version?: string;
+  hrefPrefix?: string;
+  renderLink?: AppShellRenderLink;
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export function ChangelogCard({
+  title,
+  summary,
+  date,
+  slug,
+  version,
+  hrefPrefix = '/changelog',
+  renderLink,
+}: ChangelogCardProps) {
+  const href = `${hrefPrefix}/${slug}`;
+
+  const LinkWrapper = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) =>
+    renderLink ? (
+      renderLink({ href, children, className })
+    ) : (
+      <a href={href} className={className}>
+        {children}
+      </a>
+    );
+
+  return (
+    <article className="group flex flex-col gap-3 border-b border-border/60 pb-8 last:border-0 last:pb-0">
+      <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+        <time dateTime={date}>{formatDate(date)}</time>
+        {version && (
+          <>
+            <span>·</span>
+            <Badge variant="secondary" className="font-mono text-xs">
+              {version}
+            </Badge>
+          </>
+        )}
+      </div>
+      <h2 className="text-lg font-semibold leading-snug tracking-tight">
+        <LinkWrapper className="transition-colors hover:text-primary">{title}</LinkWrapper>
+      </h2>
+      <p className={cn('line-clamp-3 text-sm text-muted-foreground')}>{summary}</p>
+      <LinkWrapper className="text-sm font-medium text-primary hover:underline">
+        Read release notes →
+      </LinkWrapper>
+    </article>
+  );
+}

package/src/blog/ChangelogList.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { AppShellRenderLink } from '../app/AppShell';
+import { ChangelogCard, type ChangelogCardProps } from './ChangelogCard';
+
+export interface ChangelogListProps {
+  entries: ChangelogCardProps[];
+  renderLink?: AppShellRenderLink;
+  emptyMessage?: string;
+  hrefPrefix?: string;
+}
+
+export function ChangelogList({
+  entries,
+  renderLink,
+  emptyMessage = 'No changelog entries yet.',
+  hrefPrefix,
+}: ChangelogListProps) {
+  if (entries.length === 0) {
+    return <p className="text-sm italic text-muted-foreground">{emptyMessage}</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      {entries.map((entry) => (
+        <ChangelogCard
+          key={entry.slug}
+          {...entry}
+          hrefPrefix={hrefPrefix}
+          renderLink={renderLink}
+        />
+      ))}
+    </div>
+  );
+}

package/src/email/ActionEmail.tsx

@@ -0,0 +1,43 @@
+import {
+  EmailButton,
+  EmailHeading,
+  EmailText,
+  emailTheme,
+} from '@olwiba/cn/email';
+import { EmailLayout } from './EmailLayout';
+import { EmailLinkFallback } from './EmailLinkFallback';
+
+export interface ActionEmailProps {
+  appName: string;
+  preview: string;
+  heading: string;
+  description: string;
+  actionLabel: string;
+  actionUrl: string;
+  brandColor?: string;
+  showLinkFallback?: boolean;
+}
+
+export function ActionEmail({
+  appName,
+  preview,
+  heading,
+  description,
+  actionLabel,
+  actionUrl,
+  brandColor = emailTheme.defaultBrandColor,
+  showLinkFallback = true,
+}: ActionEmailProps) {
+  return (
+    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>
+      <EmailHeading>{heading}</EmailHeading>
+      <EmailText variant="muted" style={{ margin: '0 0 24px' }}>
+        {description}
+      </EmailText>
+      <EmailButton href={actionUrl} label={actionLabel} brandColor={brandColor} />
+      {showLinkFallback ? (
+        <EmailLinkFallback actionUrl={actionUrl} brandColor={brandColor} />
+      ) : null}
+    </EmailLayout>
+  );
+}

package/src/email/EmailLayout.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+import {
+  EmailBody,
+  EmailContainer,
+  EmailHead,
+  EmailPreview,
+  EmailRoot,
+  EmailSection,
+  EmailText,
+  emailTheme,
+} from '@olwiba/cn/email';
+
+export interface EmailLayoutProps {
+  preview?: string;
+  appName: string;
+  brandColor?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+}
+
+/** Branded email shell — UI block composed from CN primitives. */
+export function EmailLayout({
+  preview,
+  appName,
+  brandColor = emailTheme.defaultBrandColor,
+  children,
+  footer,
+}: EmailLayoutProps) {
+  const year = new Date().getFullYear();
+
+  return (
+    <EmailRoot>
+      <EmailHead />
+      {preview ? <EmailPreview>{preview}</EmailPreview> : null}
+      <EmailBody
+        style={{
+          backgroundColor: emailTheme.pageBackground,
+          fontFamily: emailTheme.fontFamily,
+          margin: 0,
+          padding: '24px 0',
+        }}
+      >
+        <EmailContainer
+          style={{
+            maxWidth: '560px',
+            margin: '0 auto',
+            backgroundColor: emailTheme.cardBackground,
+            borderRadius: '16px',
+            overflow: 'hidden',
+            border: `1px solid ${emailTheme.cardBorder}`,
+          }}
+        >
+          <EmailSection
+            style={{
+              padding: '24px 32px',
+              borderBottom: `1px solid ${emailTheme.cardBorder}`,
+            }}
+          >
+            <EmailText
+              style={{
+                margin: 0,
+                fontSize: '18px',
+                fontWeight: 600,
+                color: brandColor,
+              }}
+            >
+              {appName}
+            </EmailText>
+          </EmailSection>
+
+          <EmailSection style={{ padding: '32px' }}>{children}</EmailSection>
+
+          {footer ?? (
+            <EmailSection
+              style={{
+                padding: '20px 32px',
+                borderTop: `1px solid ${emailTheme.cardBorder}`,
+                backgroundColor: emailTheme.mutedBackground,
+              }}
+            >
+              <EmailText
+                variant="caption"
+                style={{
+                  margin: 0,
+                  textAlign: 'center',
+                }}
+              >
+                © {year} {appName}. All rights reserved.
+              </EmailText>
+            </EmailSection>
+          )}
+        </EmailContainer>
+      </EmailBody>
+    </EmailRoot>
+  );
+}

package/src/email/EmailLinkFallback.tsx

@@ -0,0 +1,26 @@
+import { EmailLink, EmailText } from '@olwiba/cn/email';
+
+export interface EmailLinkFallbackProps {
+  actionUrl: string;
+  label?: string;
+  brandColor?: string;
+}
+
+export function EmailLinkFallback({
+  actionUrl,
+  label = 'Or copy and paste this link into your browser:',
+  brandColor,
+}: EmailLinkFallbackProps) {
+  return (
+    <>
+      <EmailText variant="caption" style={{ margin: '24px 0 8px' }}>
+        {label}
+      </EmailText>
+      <EmailText style={{ margin: 0 }}>
+        <EmailLink href={actionUrl} brandColor={brandColor}>
+          {actionUrl}
+        </EmailLink>
+      </EmailText>
+    </>
+  );
+}

package/src/email/NoticeEmail.tsx

@@ -0,0 +1,31 @@
+import {
+  EmailHeading,
+  EmailText,
+  emailTheme,
+} from '@olwiba/cn/email';
+import { EmailLayout } from './EmailLayout';
+
+export interface NoticeEmailProps {
+  appName: string;
+  preview: string;
+  heading: string;
+  body: string;
+  brandColor?: string;
+}
+
+export function NoticeEmail({
+  appName,
+  preview,
+  heading,
+  body,
+  brandColor = emailTheme.defaultBrandColor,
+}: NoticeEmailProps) {
+  return (
+    <EmailLayout preview={preview} appName={appName} brandColor={brandColor}>
+      <EmailHeading>{heading}</EmailHeading>
+      <EmailText variant="muted" style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
+        {body}
+      </EmailText>
+    </EmailLayout>
+  );
+}

package/src/email/index.ts

@@ -0,0 +1,3 @@
+export { ActionEmail, type ActionEmailProps } from './ActionEmail';
+export { NoticeEmail, type NoticeEmailProps } from './NoticeEmail';
+export { EmailLayout, type EmailLayoutProps } from './EmailLayout';

package/src/index.ts

@@ -107,6 +107,8 @@ export { RootErrorFallback } from './components/RootErrorFallback';
 // ─── Blog ────────────────────────────────────────────────────────────────────
 export { PostCard, type PostCardProps } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
+export { ChangelogList, type ChangelogListProps } from './blog/ChangelogList';
+export { ChangelogCard, type ChangelogCardProps } from './blog/ChangelogCard';
 export { MdxContent, type MdxContentProps } from './blog/MdxContent';
 
 // ─── Hooks ────────────────────────────────────────────────────────────────────

package/src/marketing/ContactSection.tsx

@@ -106,28 +106,37 @@ export function ContactSection({
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
+              <input
+                type="text"
+                name="company"
+                tabIndex={-1}
+                autoComplete="off"
+                aria-hidden="true"
+                className="hidden"
+              />
               <div className="grid gap-4 sm:grid-cols-2">
                 <div className="space-y-1.5">
                   <Label htmlFor="contact-first">First name</Label>
-                  <Input id="contact-first" placeholder="Olivia" required />
+                  <Input id="contact-first" name="firstName" placeholder="Olivia" required />
                 </div>
                 <div className="space-y-1.5">
                   <Label htmlFor="contact-last">Last name</Label>
-                  <Input id="contact-last" placeholder="Reed" required />
+                  <Input id="contact-last" name="lastName" placeholder="Reed" required />
                 </div>
               </div>
               <div className="space-y-1.5">
                 <Label htmlFor="contact-email">Email</Label>
-                <Input id="contact-email" type="email" placeholder="olivia@company.com" required />
+                <Input id="contact-email" name="email" type="email" placeholder="olivia@company.com" required />
               </div>
               <div className="space-y-1.5">
                 <Label htmlFor="contact-subject">Subject</Label>
-                <Input id="contact-subject" placeholder="How can we help?" required />
+                <Input id="contact-subject" name="subject" placeholder="How can we help?" required />
               </div>
               <div className="space-y-1.5">
                 <Label htmlFor="contact-message">Message</Label>
                 <Textarea
                   id="contact-message"
+                  name="message"
                   placeholder="Tell us what you're working on..."
                   className="min-h-28 resize-none"
                   required

package/src/marketing/Footer.tsx

@@ -26,8 +26,8 @@ export function Footer({
   const copyrightText = legal ?? `\u00A9 ${new Date().getFullYear()} ${brand.name}. All rights reserved.`;
 
   return (
-    <footer className="bg-gray-900">
-      <div className="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+    <footer className="overflow-hidden rounded-2xl border bg-foreground text-background">
+      <div className="mx-auto max-w-7xl px-6 py-20 sm:py-24 lg:px-8">
         {/* Brand */}
         <div className="flex justify-center">
           {renderLink({
@@ -36,11 +36,11 @@ export function Footer({
             children: (
               <>
                 {brand.logo && (
-                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 text-white">
+                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-background/10 text-background">
                     {brand.logo}
                   </span>
                 )}
-                <span className="text-lg font-semibold text-white">{brand.name}</span>
+                <span className="text-lg font-semibold text-background">{brand.name}</span>
               </>
             ),
           })}
@@ -53,7 +53,7 @@ export function Footer({
               <div key={label}>
                 {renderLink({
                   href,
-                  className: 'text-sm/6 text-gray-400 hover:text-white transition-colors',
+                  className: 'text-sm/6 text-background/70 transition-colors hover:text-background',
                   children: label,
                 })}
               </div>
@@ -69,7 +69,7 @@ export function Footer({
                 key={label}
                 href={href}
                 aria-label={label}
-                className="text-gray-400 hover:text-gray-300 transition-colors"
+                className="text-background/70 transition-colors hover:text-background"
               >
                 {icon}
               </a>
@@ -78,7 +78,7 @@ export function Footer({
         )}
 
         {/* Copyright */}
-        <p className="mt-10 text-center text-sm/6 text-gray-500">
+        <p className="mt-10 text-center text-sm/6 text-background/50">
           {copyrightText}
         </p>
       </div>

package/src/marketing/Navbar.tsx

@@ -40,7 +40,7 @@ export function Navbar({
           children: (
             <span className="flex items-center gap-2 font-semibold">
               {brand.logo && (
-                <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-primary-foreground">
                   {brand.logo}
                 </span>
               )}

package/src/marketing/NewsletterSection.tsx

@@ -74,6 +74,14 @@ export function NewsletterSection({
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <input
+                type="text"
+                name="company"
+                tabIndex={-1}
+                autoComplete="off"
+                aria-hidden="true"
+                className="hidden"
+              />
               <Input
                 type="email"
                 placeholder={placeholder}

package/src/types/external-packages.d.ts

@@ -1,79 +1,31 @@
-declare module '@olwiba/docs' {
-  import * as React from 'react';
-
-  export const Theme: {
-    Purple: string;
-    [key: string]: string;
+declare module '@olwiba/cn/email' {
+  export const emailTheme: {
+    pageBackground: string;
+    cardBackground: string;
+    cardBorder: string;
+    mutedBackground: string;
+    text: string;
+    mutedText: string;
+    link: string;
+    buttonText: string;
+    defaultBrandColor: string;
+    fontFamily: string;
   };
 
-  export function createDocsRoot(config: Record<string, unknown>): unknown;
-  export const DocsHeader: React.ComponentType<any>;
-  export const DocsFooter: React.ComponentType<any>;
-  export const DocsLayout: React.ComponentType<any>;
-  export const DocsCopyPage: React.ComponentType<any>;
-  export const DocsMobileNav: React.ComponentType<any>;
-  export const DocsToc: React.ComponentType<any>;
-  export const CopyCommandButton: React.ComponentType<any>;
-  export const CopyButton: React.ComponentType<any>;
-  export const mdxComponents: Record<string, React.ComponentType<any>>;
-  export function extractTextFromReactNode(node: React.ReactNode): string;
-  export function cn(...inputs: any[]): string;
-  export const Sandbox: React.ComponentType<any>;
-  export const CodeFence: React.ComponentType<any>;
-
-  export interface SandboxDefinition {
-    id: string;
-    defaultViewport?: 'desktop' | 'tablet' | 'mobile' | 'custom';
-    files: Array<{ path: string; language: string; code: string }>;
-    preview: React.LazyExoticComponent<React.FC>;
-  }
-
-  export type SandboxRegistryInput =
-    | SandboxDefinition[]
-    | Record<string, SandboxDefinition>;
-
-  export function registerSandboxes(input: SandboxRegistryInput): void;
-  export function getSandboxDefinition(id: string): SandboxDefinition | undefined;
-
-  export interface UIModeOption {
-    value: string;
-    label: string;
-  }
-  export interface UIModeDropdownProps {
-    modes: UIModeOption[];
-  }
-  export const UIModeDropdown: React.ComponentType<UIModeDropdownProps>;
-  export function getUIMode(): string;
-  export function setUIMode(mode: string): void;
-  export function subscribeUIMode(fn: (mode: string) => void): () => void;
-
-  export interface SidebarSection {
-    name: string;
-    href: string;
-  }
-
-  export interface TocItem {
-    title: string;
-    url: string;
-    depth: number;
-  }
-
-  export interface PageLoaderData {
-    path: string;
-    url: string;
-    pageTree: unknown;
-    frontmatter: { title?: string; description?: string };
-    toc: TocItem[];
-    rawContent: string;
-    neighbours: {
-      previous: { url: string; name: string } | null;
-      next: { url: string; name: string } | null;
-    };
-  }
-}
-
-declare module '@olwiba/docs/server' {
-  export function createServer(): unknown;
+  export type EmailTheme = typeof emailTheme;
+
+  export function EmailRoot(props: { children?: React.ReactNode }): JSX.Element;
+  export function EmailHead(props: { children?: React.ReactNode }): JSX.Element;
+  export function EmailBody(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailPreview(props: { children?: string }): JSX.Element;
+  export function EmailContainer(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailSection(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailText(props: {
+    children?: React.ReactNode;
+    variant?: 'default' | 'muted' | 'caption';
+    style?: React.CSSProperties;
+  }): JSX.Element;
+  export function EmailHeading(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailLink(props: { href: string; children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element;
+  export function EmailButton(props: { href: string; label: string; brandColor?: string }): JSX.Element;
 }
-
-