@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/components/organisms/game/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Game Organism Components
+ *
+ * Complex UI patterns for game interfaces.
+ *
+ * @packageDocumentation
+ */
+
+export { GameCanvas, type GameCanvasProps, type GameEntity, type EntityRenderer, type CollisionDef } from './GameCanvas';
+export { GameHud, type GameHudProps, type GameHudStat, type GameHudElement } from './GameHud';
+export { GameControls, type GameControlsProps, type GameControl } from './GameControls';
+export { GameMenu, type GameMenuProps, type MenuOption } from './GameMenu';
+export { GamePauseOverlay, type GamePauseOverlayProps, type PauseOption } from './GamePauseOverlay';
+export { GameOverScreen, type GameOverScreenProps, type GameOverStat, type GameOverAction } from './GameOverScreen';
+export { LevelSelect, type LevelSelectProps, type LevelData, type LevelFieldDisplay } from './LevelSelect';
+
+// NOTE: GameProvider was REMOVED - game logic is now schema-driven.
+// Each trait generates its own useEffect hooks for ticks.
+// The game canvas just renders entity state from useEntities.
+
+// New components for Phase 3
+export { TilemapRenderer, type TilemapRendererProps, type TileLayer as TilemapTileLayer, type Tileset as TilemapTileset, type ParallaxConfig } from './TilemapRenderer';
+export { InventoryPanel, type InventoryPanelProps, type InventoryItem } from './InventoryPanel';
+export { DialogueBox, type DialogueBoxProps, type DialogueNode, type DialogueChoice } from './DialogueBox';
+
+// System components (invisible, for render_ui pattern)
+export { InputListener, type InputListenerProps, type InputBinding } from './InputListener';
+export { CollisionDetector, type CollisionDetectorProps, type CollisionRule } from './CollisionDetector';

package/shells/typescript-shell/packages/client/src/components/organisms/index.ts

@@ -0,0 +1,83 @@
+// Shell organisms - common UI patterns
+export {
+  DataTable,
+  type DataTableProps,
+  type Column,
+  type RowAction,
+} from "./DataTable";
+export { StatCard, type StatCardProps } from "./StatCard";
+export {
+  PageHeader,
+  type PageHeaderProps,
+  type PageBreadcrumb,
+} from "./PageHeader";
+export {
+  DetailPanel,
+  type DetailPanelProps,
+  type DetailField,
+  type DetailSection,
+} from "./DetailPanel";
+export {
+  FormSection,
+  FormLayout,
+  FormActions,
+  type FormSectionProps,
+  type FormLayoutProps,
+  type FormActionsProps,
+} from "./FormSection";
+
+// Migrated organisms
+export { Form, type FormProps } from "./Form";
+export { Header, type HeaderProps } from "./Header";
+export {
+  Navigation,
+  type NavigationProps,
+  type NavigationItem,
+} from "./Navigation";
+export { Section, type SectionProps } from "./Section";
+export { Sidebar, type SidebarProps, type SidebarItem } from "./Sidebar";
+export { Split, type SplitProps } from "./Split";
+export {
+  Table,
+  type TableProps,
+  type TableColumn,
+  type SortDirection,
+} from "./Table";
+export { List, type ListProps, type ListItem } from "./List";
+export { CardGrid, type CardGridProps, type CardGridGap } from "./CardGrid";
+export { MasterDetail, type MasterDetailProps } from "./MasterDetail";
+
+// Dialog organisms
+export {
+  ConfirmDialog,
+  type ConfirmDialogProps,
+  type ConfirmDialogVariant,
+} from "./ConfirmDialog";
+export {
+  WizardContainer,
+  type WizardContainerProps,
+  type WizardStep,
+} from "./WizardContainer";
+
+// Almadar visualization
+export {
+  OrbitalVisualization,
+  type OrbitalVisualizationProps,
+} from "./OrbitalVisualization";
+
+// Layout organisms
+export * from "./layout";
+
+// Game organisms
+export * from "./game";
+
+// UI Slot system
+export {
+  UISlotRenderer,
+  UISlotComponent,
+  SlotContentRenderer,
+  type UISlotRendererProps,
+} from "./UISlotRenderer";
+export { ModalSlot, type ModalSlotProps } from "./ModalSlot";
+export { DrawerSlot, type DrawerSlotProps } from "./DrawerSlot";
+export { ToastSlot, type ToastSlotProps } from "./ToastSlot";

package/shells/typescript-shell/packages/client/src/components/organisms/layout/DashboardGrid.tsx

@@ -0,0 +1,94 @@
+/**
+ * DashboardGrid Component
+ *
+ * Multi-column grid for widgets and stats cards.
+ * Supports cell spanning for flexible dashboard layouts.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+import React from "react";
+import { cn } from "../../../lib/cn";
+
+export interface DashboardGridCell {
+  /** Unique cell ID */
+  id: string;
+  /** Content to render in the cell */
+  content: React.ReactNode;
+  /** Number of columns this cell spans (1-4) */
+  colSpan?: 1 | 2 | 3 | 4;
+  /** Number of rows this cell spans (1-2) */
+  rowSpan?: 1 | 2;
+}
+
+export interface DashboardGridProps {
+  /** Number of columns */
+  columns?: 2 | 3 | 4;
+  /** Gap between cells */
+  gap?: "sm" | "md" | "lg";
+  /** Cell definitions */
+  cells: DashboardGridCell[];
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const gapStyles = {
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+};
+
+const columnStyles = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+};
+
+const colSpanStyles = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+};
+
+const rowSpanStyles = {
+  1: "row-span-1",
+  2: "row-span-2",
+};
+
+/**
+ * DashboardGrid - Multi-column widget grid
+ */
+export const DashboardGrid: React.FC<DashboardGridProps> = ({
+  columns = 3,
+  gap = "md",
+  cells,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid w-full",
+        columnStyles[columns],
+        gapStyles[gap],
+        className,
+      )}
+    >
+      {cells.map((cell) => (
+        <div
+          key={cell.id}
+          className={cn(
+            "border-2 border-[var(--color-border)] bg-[var(--color-card)]",
+            colSpanStyles[cell.colSpan || 1],
+            rowSpanStyles[cell.rowSpan || 1],
+          )}
+        >
+          {cell.content}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+DashboardGrid.displayName = "DashboardGrid";
+
+export default DashboardGrid;

package/shells/typescript-shell/packages/client/src/components/organisms/layout/MasterDetail.tsx

@@ -0,0 +1,93 @@
+/**
+ * MasterDetail Component
+ *
+ * Classic master-detail pattern with a list on the left
+ * and selected item detail on the right.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+import React from "react";
+import { cn } from "../../../lib/cn";
+import { Typography } from "../../atoms/Typography";
+import { SplitPane } from "./SplitPane";
+
+export interface MasterDetailProps {
+  /** Master panel content (usually a list) */
+  master: React.ReactNode;
+  /** Detail panel content */
+  detail: React.ReactNode;
+  /** Content shown when nothing is selected */
+  emptyDetail?: React.ReactNode;
+  /** Whether an item is currently selected */
+  hasSelection?: boolean;
+  /** Width of master panel (e.g., '350px', '30%') */
+  masterWidth?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Class for master pane */
+  masterClassName?: string;
+  /** Class for detail pane */
+  detailClassName?: string;
+}
+
+/**
+ * Default empty state for detail panel
+ */
+const DefaultEmptyDetail: React.FC = () => (
+  <div className="flex items-center justify-center h-full border-2 border-dashed border-[var(--color-border)]">
+    <Typography
+      variant="body2"
+      className="text-[var(--color-muted-foreground)]"
+    >
+      Select an item to view details
+    </Typography>
+  </div>
+);
+
+/**
+ * MasterDetail - List + detail split layout
+ */
+export const MasterDetail: React.FC<MasterDetailProps> = ({
+  master,
+  detail,
+  emptyDetail,
+  hasSelection = false,
+  masterWidth = "350px",
+  className,
+  masterClassName,
+  detailClassName,
+}) => {
+  // Calculate ratio from masterWidth if it's a percentage
+  const ratio = masterWidth.endsWith("%") ? parseInt(masterWidth, 10) : 30; // Default to 30% if pixel value
+
+  return (
+    <div
+      className={cn("flex h-full w-full", className)}
+      style={{
+        display: "grid",
+        gridTemplateColumns: masterWidth.endsWith("%")
+          ? `${masterWidth} 1fr`
+          : `${masterWidth} 1fr`,
+      }}
+    >
+      {/* Master panel */}
+      <div
+        className={cn(
+          "border-r-2 border-[var(--color-border)] overflow-auto",
+          masterClassName,
+        )}
+      >
+        {master}
+      </div>
+
+      {/* Detail panel */}
+      <div className={cn("overflow-auto", detailClassName)}>
+        {hasSelection ? detail : emptyDetail || <DefaultEmptyDetail />}
+      </div>
+    </div>
+  );
+};
+
+MasterDetail.displayName = "MasterDetail";
+
+export default MasterDetail;

package/shells/typescript-shell/packages/client/src/components/organisms/layout/SplitPane.tsx

@@ -0,0 +1,136 @@
+/**
+ * SplitPane Component
+ *
+ * Two-pane resizable split layout for master-detail views,
+ * dual-pane editors, and code + preview layouts.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+import React, { useState, useRef, useCallback } from "react";
+import { cn } from "../../../lib/cn";
+
+export interface SplitPaneProps {
+  /** Direction of the split */
+  direction?: "horizontal" | "vertical";
+  /** Initial ratio (0-100, percentage of first pane) */
+  ratio?: number;
+  /** Minimum size of either pane in pixels */
+  minSize?: number;
+  /** Allow user resizing */
+  resizable?: boolean;
+  /** Content for the left/top pane */
+  left: React.ReactNode;
+  /** Content for the right/bottom pane */
+  right: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Class for left/top pane */
+  leftClassName?: string;
+  /** Class for right/bottom pane */
+  rightClassName?: string;
+}
+
+/**
+ * SplitPane - Two-pane resizable layout
+ */
+export const SplitPane: React.FC<SplitPaneProps> = ({
+  direction = "horizontal",
+  ratio: initialRatio = 50,
+  minSize = 100,
+  resizable = true,
+  left,
+  right,
+  className,
+  leftClassName,
+  rightClassName,
+}) => {
+  const [ratio, setRatio] = useState(initialRatio);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!resizable) return;
+      e.preventDefault();
+      isDragging.current = true;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        if (!isDragging.current || !containerRef.current) return;
+
+        const rect = containerRef.current.getBoundingClientRect();
+        let newRatio: number;
+
+        if (direction === "horizontal") {
+          const x = e.clientX - rect.left;
+          newRatio = (x / rect.width) * 100;
+        } else {
+          const y = e.clientY - rect.top;
+          newRatio = (y / rect.height) * 100;
+        }
+
+        // Clamp to min/max based on minSize
+        const minRatio =
+          (minSize / (direction === "horizontal" ? rect.width : rect.height)) *
+          100;
+        const maxRatio = 100 - minRatio;
+        newRatio = Math.max(minRatio, Math.min(maxRatio, newRatio));
+
+        setRatio(newRatio);
+      };
+
+      const handleMouseUp = () => {
+        isDragging.current = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [direction, minSize, resizable],
+  );
+
+  const isHorizontal = direction === "horizontal";
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "flex w-full h-full",
+        isHorizontal ? "flex-row" : "flex-col",
+        className,
+      )}
+    >
+      {/* Left/Top pane */}
+      <div
+        className={cn("overflow-auto", leftClassName)}
+        style={{
+          [isHorizontal ? "width" : "height"]: `${ratio}%`,
+          flexShrink: 0,
+        }}
+      >
+        {left}
+      </div>
+
+      {/* Resize handle */}
+      {resizable && (
+        <div
+          onMouseDown={handleMouseDown}
+          className={cn(
+            "flex-shrink-0 bg-[var(--color-border)] transition-colors",
+            isHorizontal
+              ? "w-1 cursor-col-resize hover:w-1.5 hover:bg-[var(--color-muted-foreground)]"
+              : "h-1 cursor-row-resize hover:h-1.5 hover:bg-[var(--color-muted-foreground)]",
+          )}
+        />
+      )}
+
+      {/* Right/Bottom pane */}
+      <div className={cn("flex-1 overflow-auto", rightClassName)}>{right}</div>
+    </div>
+  );
+};
+
+SplitPane.displayName = "SplitPane";
+
+export default SplitPane;

package/shells/typescript-shell/packages/client/src/components/organisms/layout/TabbedContainer.tsx

@@ -0,0 +1,162 @@
+/**
+ * TabbedContainer Component
+ *
+ * Tabbed content areas with shared header/context.
+ * Wraps the Tabs molecule with layout-specific styling.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+import React, { useState, useCallback } from "react";
+import { cn } from "../../../lib/cn";
+import { Typography } from "../../atoms/Typography";
+
+export interface TabDefinition {
+  /** Tab identifier */
+  id: string;
+  /** Tab label */
+  label: string;
+  /** Tab content (optional if using sectionId) */
+  content?: React.ReactNode;
+  /** Section ID to render (alternative to content) */
+  sectionId?: string;
+  /** Optional badge/count */
+  badge?: string | number;
+  /** Disable this tab */
+  disabled?: boolean;
+}
+
+export interface TabbedContainerProps {
+  /** Tab definitions */
+  tabs: TabDefinition[];
+  /** Default active tab ID */
+  defaultTab?: string;
+  /** Controlled active tab */
+  activeTab?: string;
+  /** Callback when tab changes */
+  onTabChange?: (tabId: string) => void;
+  /** Tab position */
+  position?: "top" | "left";
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * TabbedContainer - Tabbed content areas
+ */
+export const TabbedContainer: React.FC<TabbedContainerProps> = ({
+  tabs,
+  defaultTab,
+  activeTab: controlledActiveTab,
+  onTabChange,
+  position = "top",
+  className,
+}) => {
+  const [internalActiveTab, setInternalActiveTab] = useState(
+    defaultTab || tabs[0]?.id || "",
+  );
+
+  const activeTab =
+    controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;
+
+  const handleTabChange = useCallback(
+    (tabId: string) => {
+      if (controlledActiveTab === undefined) {
+        setInternalActiveTab(tabId);
+      }
+      onTabChange?.(tabId);
+    },
+    [controlledActiveTab, onTabChange],
+  );
+
+  const activeTabDef = tabs.find((tab) => tab.id === activeTab);
+  const activeContent =
+    activeTabDef?.content ||
+    (activeTabDef?.sectionId ? (
+      <div className="p-4 text-[var(--color-muted-foreground)]">
+        Section: {activeTabDef.sectionId}
+      </div>
+    ) : null);
+
+  const isVertical = position === "left";
+
+  return (
+    <div
+      className={cn(
+        "flex w-full h-full",
+        isVertical ? "flex-row" : "flex-col",
+        className,
+      )}
+    >
+      {/* Tab list */}
+      <div
+        role="tablist"
+        className={cn(
+          "flex flex-shrink-0",
+          isVertical
+            ? "flex-col border-r-2 border-[var(--color-border)]"
+            : "flex-row border-b-2 border-[var(--color-border)]",
+        )}
+      >
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          const isDisabled = tab.disabled;
+
+          return (
+            <button
+              key={tab.id}
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={`tabpanel-${tab.id}`}
+              aria-disabled={isDisabled}
+              disabled={isDisabled}
+              onClick={() => !isDisabled && handleTabChange(tab.id)}
+              className={cn(
+                "flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors",
+                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                isActive
+                  ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]"
+                  : "bg-[var(--color-card)] text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+                isVertical ? "justify-start" : "justify-center",
+              )}
+            >
+              <Typography
+                variant="small"
+                weight={isActive ? "bold" : "normal"}
+                color="inherit"
+              >
+                {tab.label}
+              </Typography>
+              {tab.badge !== undefined && (
+                <span
+                  className={cn(
+                    "px-1.5 py-0.5 text-xs font-medium rounded",
+                    isActive
+                      ? "bg-[var(--color-primary-foreground)] text-[var(--color-primary)]"
+                      : "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+                  )}
+                >
+                  {tab.badge}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Tab panel */}
+      <div
+        role="tabpanel"
+        id={`tabpanel-${activeTab}`}
+        aria-labelledby={`tab-${activeTab}`}
+        className="flex-1 overflow-auto"
+      >
+        {activeContent}
+      </div>
+    </div>
+  );
+};
+
+TabbedContainer.displayName = "TabbedContainer";
+
+export default TabbedContainer;

package/shells/typescript-shell/packages/client/src/components/organisms/layout/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Layout organisms index
+ * 
+ * Export layout pattern components for adaptive UI.
+ */
+
+export { SplitPane, type SplitPaneProps } from './SplitPane';
+export { MasterDetail, type MasterDetailProps } from './MasterDetail';
+export { DashboardGrid, type DashboardGridProps, type DashboardGridCell } from './DashboardGrid';
+export { TabbedContainer, type TabbedContainerProps, type TabDefinition } from './TabbedContainer';