Component Architecture

Building reusable, composable UI components with the Terminal Luxury design system.

Design Philosophy

MiniWork components follow a hierarchical structure: Components → Layouts → Pages. This ensures consistency and reusability across your application.

Shared UI Components

The src/components/ui.ts file contains reusable components:

src/components/ui.ts

        // Site Header - used on public pages
export function siteHeader({ currentPath }: { currentPath?: string }): string {
  return `
    <header class="site-header">
      <a href="/" class="site-logo">...</a>
      <nav class="site-nav">...</nav>
    </header>
  `;
}

// Site Footer
export function siteFooter(): string {
  return `<footer class="site-footer">...</footer>`;
}

// Admin Sidebar
export function adminSidebar({ userEmail, userRoles, activePage }): string {
  return `<aside class="admin-sidebar">...</aside>`;
}

// Admin Header
export function adminHeader({ title, actions }): string {
  return `<header class="admin-header">...</header>`;
}

Layouts

Layouts compose components into page structures:

src/layouts/admin.ts

        import { baseLayout } from "./base";
import { adminSidebar, adminHeader, adminFooter } from "../components/ui";

export function adminLayout(content: string, options: AdminLayoutOptions): string {
  const { user, activePage, pageTitle } = options;

  return baseLayout(`
    <div class="admin-layout">
      ${adminSidebar({ userEmail: user.email, userRoles: user.roles, activePage })}
      <main class="admin-main">
        ${adminHeader({ title: pageTitle })}
        <div class="admin-content">${content}</div>
        ${adminFooter()}
      </main>
    </div>
  `, { title: pageTitle, styles: componentStyles });
}

View Transitions

Components can opt-in to View Transitions API for smooth page navigation:

/* Static elements - no transition */
.admin-sidebar { view-transition-name: admin-sidebar; }
.admin-header { view-transition-name: admin-header; }

/* Animated content area */
.admin-content { view-transition-name: admin-content; }

/* CSS handles the animation */
::view-transition-old(admin-sidebar),
::view-transition-new(admin-sidebar) {
  animation: none; /* Keep static */
}

html.vt-down::view-transition-old(admin-content) {
  animation: 0.15s ease-out slide-down-out;
}

Vertical Transitions

Admin and docs sidebars use vertical slide animations (up/down) when navigating between menu items, while cross-section navigation uses horizontal slides.