@houston-ai/layout 0.5.1

package/README.md

@@ -0,0 +1,49 @@
+# @deck-ui/layout
+
+App-level layout primitives. Sidebar for navigation, tab bar for view switching, split view for panels.
+
+## Install
+
+```bash
+pnpm add @deck-ui/layout
+```
+
+## Usage
+
+```tsx
+import { AppSidebar, TabBar, SplitView } from "@deck-ui/layout"
+import "@deck-ui/layout/src/styles.css"
+
+<AppSidebar
+  logo={<Logo />}
+  items={projects}
+  selectedId={activeId}
+  onSelect={setActiveId}
+  onAdd={createProject}
+/>
+
+<TabBar
+  tabs={[
+    { id: "board", label: "Board" },
+    { id: "chat", label: "Chat", badge: 2 },
+  ]}
+  activeTab={currentTab}
+  onTabChange={setCurrentTab}
+/>
+```
+
+## Exports
+
+- `AppSidebar` -- project/chat list sidebar with logo, add, delete, keyboard shortcuts
+- `TabBar` -- horizontal tab strip with badges and action slots
+- `SplitView` -- two-pane layout with resizable divider
+- `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` -- lower-level resizable primitives
+
+## Peer Dependencies
+
+- React 19+
+- @deck-ui/core
+
+---
+
+Part of [Keel & Deck](../../README.md).

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@houston-ai/layout",
+  "version": "0.5.1",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@houston-ai/core": "workspace:*"
+  },
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "react-resizable-panels": "^4.7.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export { AppSidebar } from "./sidebar";
+export type { SidebarProps } from "./sidebar";
+
+export { TabBar } from "./tab-bar";
+export type { TabBarProps } from "./tab-bar";
+
+export { SplitView } from "./split-view";
+export type { SplitViewProps } from "./split-view";
+
+export {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "./resizable";

package/src/resizable.tsx

@@ -0,0 +1,50 @@
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "@houston-ai/core";
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/src/sidebar.tsx

@@ -0,0 +1,147 @@
+import { useState, type KeyboardEvent, type ReactNode } from "react";
+import { Plus, MoreHorizontal } from "lucide-react";
+import { cn, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@houston-ai/core";
+
+export interface SidebarProps {
+  logo?: ReactNode;
+  items: { id: string; name: string }[];
+  selectedId?: string | null;
+  onSelect: (id: string) => void;
+  onAdd?: () => void;
+  onDelete?: (id: string) => void;
+  onRename?: (id: string, newName: string) => void;
+  sectionLabel?: string;
+  children?: ReactNode;
+}
+
+export function AppSidebar({
+  logo,
+  items,
+  selectedId,
+  onSelect,
+  onAdd,
+  onDelete,
+  onRename,
+  sectionLabel,
+  children,
+}: SidebarProps) {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const hasMenu = !!onDelete || !!onRename;
+
+  const startRename = (id: string, currentName: string) => {
+    setEditingId(id);
+    setEditValue(currentName);
+  };
+
+  const commitRename = (id: string) => {
+    const trimmed = editValue.trim();
+    if (trimmed && onRename) onRename(id, trimmed);
+    setEditingId(null);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent, id: string) => {
+    if (onDelete && (e.key === "Delete" || e.key === "Backspace")) {
+      e.preventDefault();
+      onDelete(id);
+    }
+  };
+
+  return (
+    <>
+      <aside className="w-[200px] bg-secondary flex flex-col h-full shrink-0 border-r border-border">
+        <div className="flex items-center justify-between px-4 pt-4 pb-2">
+          <div className="flex items-center gap-2">{logo}</div>
+          {onAdd && (
+            <button
+              onClick={onAdd}
+              className="size-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+            >
+              <Plus className="size-4" strokeWidth={2} />
+            </button>
+          )}
+        </div>
+
+        {sectionLabel && (
+          <div className="px-4 pt-3 pb-1.5">
+            <span className="text-[12px] text-muted-foreground">{sectionLabel}</span>
+          </div>
+        )}
+
+        <div className="flex-1 overflow-y-auto px-2">
+          {items.map((item) => {
+            const isActive = item.id === selectedId;
+            const isEditing = editingId === item.id;
+
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  "group flex items-center rounded-lg transition-colors duration-100",
+                  isActive ? "bg-accent" : "hover:bg-accent/50",
+                )}
+              >
+                {isEditing ? (
+                  <input
+                    autoFocus
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onBlur={() => commitRename(item.id)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") commitRename(item.id);
+                      if (e.key === "Escape") setEditingId(null);
+                    }}
+                    className="flex-1 px-3 py-1.5 text-[13px] bg-background outline-none border border-border rounded-lg focus:border-foreground/30"
+                  />
+                ) : (
+                  <button
+                    onClick={() => onSelect(item.id)}
+                    onKeyDown={(e) => handleKeyDown(e, item.id)}
+                    className={cn(
+                      "flex-1 text-left px-3 py-1.5 text-[13px] truncate min-w-0",
+                      isActive ? "text-foreground" : "text-accent-foreground",
+                    )}
+                  >
+                    {item.name}
+                  </button>
+                )}
+
+                {hasMenu && !isEditing && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className="shrink-0 size-7 flex items-center justify-center rounded-md text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground hover:bg-accent transition-all mr-1"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <MoreHorizontal className="size-4" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" side="bottom">
+                      {onRename && (
+                        <DropdownMenuItem
+                          onClick={() => startRename(item.id, item.name)}
+                        >
+                          Rename
+                        </DropdownMenuItem>
+                      )}
+                      {onDelete && (
+                        <DropdownMenuItem
+                          onClick={() => onDelete(item.id)}
+                          className="text-destructive focus:text-destructive"
+                        >
+                          Delete
+                        </DropdownMenuItem>
+                      )}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </aside>
+
+      {children}
+    </>
+  );
+}

package/src/split-view.tsx

@@ -0,0 +1,40 @@
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "./resizable";
+import type { ReactNode } from "react";
+
+export interface SplitViewProps {
+  left: ReactNode;
+  right: ReactNode;
+  defaultLeftSize?: number;
+  defaultRightSize?: number;
+  minLeftSize?: number;
+  minRightSize?: number;
+}
+
+export function SplitView({
+  left,
+  right,
+  defaultLeftSize = 55,
+  defaultRightSize = 45,
+  minLeftSize = 30,
+  minRightSize = 25,
+}: SplitViewProps) {
+  return (
+    <ResizablePanelGroup orientation="horizontal" className="h-full">
+      <ResizablePanel
+        defaultSize={defaultLeftSize}
+        minSize={minLeftSize}
+        className="overflow-hidden"
+      >
+        {left}
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={defaultRightSize} minSize={minRightSize}>
+        {right}
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}

package/src/styles.css

@@ -0,0 +1,2 @@
+/* @houston-ai/layout — Tell Tailwind to scan this package's components */
+@source ".";

package/src/tab-bar.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import { cn } from "@houston-ai/core";
+
+export interface TabBarProps {
+  title?: string;
+  tabs: { id: string; label: string; badge?: number }[];
+  activeTab: string;
+  onTabChange: (id: string) => void;
+  actions?: ReactNode;
+  menu?: ReactNode;
+}
+
+export function TabBar({
+  title,
+  tabs,
+  activeTab,
+  onTabChange,
+  actions,
+  menu,
+}: TabBarProps) {
+  return (
+    <div className="shrink-0 px-5 pt-4">
+      {/* Title row + menu + actions */}
+      {(title || menu || actions) && (
+        <div className="flex items-center gap-2 mb-3">
+          {title && (
+            <h1 className="text-xl font-semibold text-foreground">{title}</h1>
+          )}
+          {menu}
+          {actions && (
+            <div className="ml-auto flex items-center gap-2">{actions}</div>
+          )}
+        </div>
+      )}
+
+      {/* Tab strip */}
+      <div className="flex items-center gap-5">
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={cn(
+                "relative flex items-center gap-1.5 pb-2.5 text-sm transition-colors duration-200",
+                isActive
+                  ? "text-foreground font-medium"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {tab.label}
+              {tab.badge != null && tab.badge > 0 && (
+                <span
+                  className={cn(
+                    "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-xs font-medium",
+                    isActive
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-accent text-accent-foreground",
+                  )}
+                >
+                  {tab.badge}
+                </span>
+              )}
+              {isActive && (
+                <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary rounded-full" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}