@olwiba/ui 0.0.34 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -43,11 +43,18 @@
     "zod": "^4.3.6"
   },
   "peerDependencies": {
+    "@content-collections/mdx": ">=0.2.0",
     "@olwiba/cn": ">=0.1.2",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@content-collections/mdx": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@content-collections/mdx": "^0.2.2",
     "@olwiba/cn": "^0.1.15",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",

package/src/app/AppShell.tsx

@@ -89,6 +89,8 @@ export interface AppShellProps {
   pageTitle?: string;
   /** Slot rendered at the start of the top header bar, after the sidebar trigger. */
   headerStart?: ReactNode;
+  /** Slot rendered at the end of the top header bar. */
+  headerEnd?: ReactNode;
   /** Override link rendering for SPA navigation. Defaults to a native <a>. */
   renderLink?: AppShellRenderLink;
   children?: ReactNode;
@@ -205,18 +207,26 @@ function ShellSidebar({
   side: 'left' | 'right';
   sidebarPosition: 'viewport' | 'contained';
 }) {
+  const fallbackLogo = typeof brand.name === 'string' ? brand.name.slice(0, 1).toUpperCase() : null;
+
   return (
     <Sidebar side={side} collapsible={collapsible} sidebarPosition={sidebarPosition}>
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
+            <SidebarMenuButton asChild tooltip={typeof brand.name === 'string' ? brand.name : undefined} className="data-[slot=sidebar-menu-button]:!p-1.5">
               {renderLink({
                 href: brand.href ?? '#',
                 children: (
                   <>
-                    {brand.logo}
-                    <span className="text-base font-semibold">{brand.name}</span>
+                    {brand.logo ?? (
+                      <span className="flex size-4 shrink-0 items-center justify-center text-sm font-semibold">
+                        {fallbackLogo}
+                      </span>
+                    )}
+                    <span className="min-w-0 truncate text-base font-semibold group-data-[collapsible=icon]:hidden">
+                      {brand.name}
+                    </span>
                   </>
                 ),
               })}
@@ -289,7 +299,15 @@ function ShellSidebar({
   );
 }
 
-function ShellHeader({ pageTitle, headerStart }: { pageTitle: string; headerStart?: ReactNode }) {
+function ShellHeader({
+  pageTitle,
+  headerStart,
+  headerEnd,
+}: {
+  pageTitle: string;
+  headerStart?: ReactNode;
+  headerEnd?: ReactNode;
+}) {
   return (
     <header className="flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
@@ -301,6 +319,11 @@ function ShellHeader({ pageTitle, headerStart }: { pageTitle: string; headerStar
         )}
         <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
         <h1 className="text-base font-medium">{pageTitle}</h1>
+        {headerEnd && (
+          <div className="ml-auto flex items-center gap-1">
+            {headerEnd}
+          </div>
+        )}
       </div>
     </header>
   );
@@ -331,6 +354,7 @@ export function AppShell({
   user = defaultUser,
   pageTitle = 'Dashboard',
   headerStart,
+  headerEnd,
   renderLink = defaultRenderLink,
   collapsible = 'icon',
   sidebarPosition = 'viewport',
@@ -355,7 +379,7 @@ export function AppShell({
         sidebarPosition={sidebarPosition}
       />
       <SidebarInset className={isContained ? undefined : 'overflow-y-auto'}>
-        <ShellHeader pageTitle={pageTitle} headerStart={headerStart} />
+        <ShellHeader pageTitle={pageTitle} headerStart={headerStart} headerEnd={headerEnd} />
         {children}
       </SidebarInset>
     </SidebarProvider>

package/src/blog/MdxContent.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { useMDXComponent } from '@content-collections/mdx/react';
+import { cn } from '../lib/utils';
+
+const components = {
+  h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h1 className={cn('mt-8 scroll-m-20 text-3xl font-bold tracking-tight text-foreground first:mt-0', className)} {...props} />
+  ),
+  h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h2 className={cn('mt-10 scroll-m-20 text-2xl font-semibold tracking-tight text-foreground first:mt-0', className)} {...props} />
+  ),
+  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h3 className={cn('mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-foreground', className)} {...props} />
+  ),
+  h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h4 className={cn('mt-6 scroll-m-20 text-lg font-semibold tracking-tight text-foreground', className)} {...props} />
+  ),
+  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p className={cn('leading-7 text-muted-foreground [&:not(:first-child)]:mt-6', className)} {...props} />
+  ),
+  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul className={cn('my-6 ml-6 list-disc text-muted-foreground', className)} {...props} />
+  ),
+  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol className={cn('my-6 ml-6 list-decimal text-muted-foreground', className)} {...props} />
+  ),
+  li: ({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) => (
+    <li className={cn('mt-2', className)} {...props} />
+  ),
+  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLQuoteElement>) => (
+    <blockquote className={cn('mt-6 rounded-r-lg border-l-4 border-primary bg-muted py-4 pl-6 pr-4 italic text-muted-foreground', className)} {...props} />
+  ),
+  hr: (props: React.HTMLAttributes<HTMLHRElement>) => (
+    <hr className="my-8 border-border" {...props} />
+  ),
+  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    <img className={cn('rounded-lg border shadow-sm', className)} alt={alt} {...props} />
+  ),
+  pre: ({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) => (
+    <pre className={cn('mt-6 mb-4 overflow-x-auto rounded-lg bg-muted p-4 text-sm', className)} {...props} />
+  ),
+  code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <code className={cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm text-foreground', className)} {...props} />
+  ),
+  table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
+    <div className="my-6 w-full overflow-y-auto rounded-lg border border-border">
+      <table className={cn('w-full', className)} {...props} />
+    </div>
+  ),
+  tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+    <tr className={cn('m-0 border-t border-border p-0 even:bg-muted', className)} {...props} />
+  ),
+  th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+    <th className={cn('border border-border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right', className)} {...props} />
+  ),
+  td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+    <td className={cn('border border-border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right', className)} {...props} />
+  ),
+  a: ({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+    <a className={cn('font-medium text-primary underline underline-offset-4 hover:text-primary/80', className)} {...props} />
+  ),
+};
+
+export interface MdxContentProps {
+  code: string;
+}
+
+export function MdxContent({ code }: MdxContentProps) {
+  const MDXComponent = useMDXComponent(code);
+  return <MDXComponent components={components} />;
+}

package/src/components/AppScreen.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+function AppScreenRoot({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('flex h-full flex-col', className)}>
+      {children}
+    </div>
+  );
+}
+
+function AppScreenHeader({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('flex items-center gap-2 border-b border-border px-4 py-3 shrink-0', className)}>
+      {children}
+    </div>
+  );
+}
+
+function AppScreenBody({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('flex-1 overflow-auto px-4 py-3', className)}>
+      {children}
+    </div>
+  );
+}
+
+export const AppScreen = Object.assign(AppScreenRoot, {
+  Header: AppScreenHeader,
+  Body: AppScreenBody,
+});
+
+export type { };

package/src/components/PhoneFrame.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+const sizes = {
+  sm: { outer: 'w-44', height: 'h-80', notch: 'w-16 h-4', border: 'rounded-[2rem]', screen: 'rounded-[1.75rem]' },
+  md: { outer: 'w-56', height: 'h-[26rem]', notch: 'w-20 h-5', border: 'rounded-[2.5rem]', screen: 'rounded-[2.25rem]' },
+  lg: { outer: 'w-72', height: 'h-[34rem]', notch: 'w-24 h-6', border: 'rounded-[3rem]', screen: 'rounded-[2.75rem]' },
+} as const;
+
+export interface PhoneFrameProps {
+  children?: React.ReactNode;
+  size?: keyof typeof sizes;
+  className?: string;
+  float?: boolean;
+}
+
+export function PhoneFrame({ children, size = 'md', className, float = true }: PhoneFrameProps) {
+  const s = sizes[size];
+  return (
+    <>
+      {float && (
+        <style>{`
+          @keyframes olwiba-phone-float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+          }
+          .olwiba-phone-float { animation: olwiba-phone-float 5s ease-in-out infinite; }
+        `}</style>
+      )}
+      <div
+        className={cn(
+          'relative mx-auto',
+          s.outer,
+          float && 'olwiba-phone-float',
+          className,
+        )}
+      >
+        {/* Device body */}
+        <div
+          className={cn(
+            'relative flex w-full flex-col overflow-hidden border-[3px] border-foreground/15 bg-muted shadow-2xl',
+            s.border,
+            s.height,
+          )}
+        >
+          {/* Status bar / notch area */}
+          <div className="relative flex justify-center pt-3 pb-1 shrink-0">
+            <div className={cn('rounded-full bg-foreground/10', s.notch)} />
+          </div>
+
+          {/* Screen */}
+          <div className={cn('mx-1.5 mb-1.5 flex-1 overflow-hidden bg-background', s.screen)}>
+            {children}
+          </div>
+        </div>
+
+        {/* Side buttons */}
+        <div className="absolute right-[-5px] top-24 h-12 w-[3px] rounded-l-sm bg-foreground/15" />
+        <div className="absolute left-[-5px] top-20 h-8 w-[3px] rounded-r-sm bg-foreground/15" />
+        <div className="absolute left-[-5px] top-32 h-8 w-[3px] rounded-r-sm bg-foreground/15" />
+        <div className="absolute left-[-5px] top-44 h-8 w-[3px] rounded-r-sm bg-foreground/15" />
+      </div>
+    </>
+  );
+}

package/src/index.ts

@@ -81,6 +81,10 @@ export { Dock, type DockProps, type DockItem } from './components/Dock';
 export { ContextMenu, type ContextMenuProps, type ContextMenuDef } from './components/ContextMenu';
 export { ConfirmDialog, type ConfirmDialogProps } from './components/ConfirmDialog';
 
+// ─── Components — device mockups ────────────────────────────────────────────
+export { PhoneFrame, type PhoneFrameProps } from './components/PhoneFrame';
+export { AppScreen } from './components/AppScreen';
+
 // ─── Components — cards ───────────────────────────────────────────────────────
 export { GlassCard, type GlassCardProps } from './components/GlassCard';
 export { FeatureCard, type FeatureCardProps } from './components/FeatureCard';
@@ -103,6 +107,7 @@ export { RootErrorFallback } from './components/RootErrorFallback';
 // ─── Blog ────────────────────────────────────────────────────────────────────
 export { PostCard, type PostCardProps } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
+export { MdxContent, type MdxContentProps } from './blog/MdxContent';
 
 // ─── Hooks ────────────────────────────────────────────────────────────────────
 export { useMounted } from './hooks/use-mounted';

package/src/marketing/HeroSection.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ArrowRight } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@olwiba/cn';
 import { FadeIn } from '../motion/FadeIn';
+import { PhoneFrame } from '../components/PhoneFrame';
 import type { AppShellRenderLink } from '../app/AppShell';
 
 export interface HeroSectionProps {
@@ -12,7 +13,9 @@ export interface HeroSectionProps {
   description: string;
   primaryCta: { label: string; href: string };
   secondaryCta?: { label: string; href: string };
-  heroImage: React.ReactNode;
+  heroImage?: React.ReactNode;
+  media?: 'image' | 'phone' | 'none';
+  phoneSize?: 'sm' | 'md' | 'lg';
   avatarUrls?: string[];
   socialProofText?: string;
   renderLink?: AppShellRenderLink;
@@ -29,6 +32,8 @@ export function HeroSection({
   primaryCta,
   secondaryCta,
   heroImage,
+  media = 'image',
+  phoneSize = 'lg',
   avatarUrls,
   socialProofText,
   renderLink = defaultRenderLink,
@@ -74,12 +79,22 @@ export function HeroSection({
             </div>
           </FadeIn>
 
-          {/* Right - hero image */}
-          <FadeIn direction="right" delay={200}>
-            <div className="overflow-hidden rounded-2xl">
-              {heroImage}
-            </div>
-          </FadeIn>
+          {/* Right - media */}
+          {media !== 'none' && (
+            <FadeIn direction="right" delay={200}>
+              {media === 'phone' ? (
+                <div className="flex justify-center">
+                  <PhoneFrame size={phoneSize}>
+                    {heroImage}
+                  </PhoneFrame>
+                </div>
+              ) : (
+                <div className="overflow-hidden rounded-2xl">
+                  {heroImage}
+                </div>
+              )}
+            </FadeIn>
+          )}
         </div>
 
         {/* Avatar social proof row */}