feat: add layout package with PageHeader component and configuration files

Author: hotlong

.github/prompts/component.prompt.md

@@ -4,6 +4,29 @@
 **Task:** Create reusable, schema-driven UI widgets for the ObjectStack Design System.
 **Environment:** You are working in an Application or Plugin codebase. You consume `@objectstack/spec` types to build compatible components.
 
+## 0. Architectural Strategy (Strict)
+
+**❌ Do NOT create a package for every component.**
+**✅ Group by Dependency Weight:**
+
+1.  **Atoms (@object-ui/components):**
+    *   Shadcn Primitives, Icons, Buttons.
+    *   Zero business logic.
+    *   Zero heavy 3rd-party deps.
+
+2.  **Fields (@object-ui/fields):**
+    *   Standard Input/Display widgets (Text, Number, Date, Select).
+    *   Must implement `FieldWidgetProps`.
+
+3.  **Layouts & Patterns (@object-ui/layout):**
+    *   Page structures (Sidebar, Header, AppLauncher).
+    *   Routing-aware components.
+
+4.  **Plugins (@object-ui/plugin-*):**
+    *   **Heavy Widgets Only.**
+    *   If it adds >50KB bundle size, it's a plugin.
+    *   Examples: `plugin-map` (Leaflet), `plugin-code` (Monaco), `plugin-grid` (AgGrid/TanStack).
+
 ---
 
 ## 1. Component Categories

packages/layout/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@object-ui/layout",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@object-ui/components": "workspace:*",
+    "@object-ui/core": "workspace:*",
+    "@object-ui/types": "workspace:*",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.563.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

packages/layout/src/PageHeader.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cn } from '@object-ui/components';
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+
+export function PageHeader({ 
+    title, 
+    description, 
+    action,
+    className, 
+    children, 
+    ...props 
+}: PageHeaderProps) {
+    return (
+        <div className={cn("flex flex-col gap-4 pb-4 md:pb-8", className)} {...props}>
+            <div className="flex items-center justify-between gap-4">
+                <div className="flex flex-col gap-1">
+                    <h1 className="text-2xl font-bold tracking-tight md:text-3xl">{title}</h1>
+                    {description && <p className="text-sm text-muted-foreground">{description}</p>}
+                </div>
+                {action && <div className="flex items-center gap-2">{action}</div>}
+            </div>
+            {children}
+        </div>
+    );
+}

packages/layout/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ObjectUI Layout
+ * Copyright (c) 2024-present ObjectStack Inc.
+ */
+
+export * from './PageHeader';

packages/layout/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

packages/layout/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'ObjectUILayout',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        '@object-ui/components',
+        '@object-ui/core',
+        '@object-ui/types',
+        'clsx',
+        'tailwind-merge',
+        'lucide-react'
+      ],
+    },
+  },
+});