@almadar/cli 1.0.6 → 1.0.8

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

@@ -1,28 +0,0 @@
-/**
- * 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

@@ -1,83 +0,0 @@
-// 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

@@ -1,94 +0,0 @@
-/**
- * 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

@@ -1,93 +0,0 @@
-/**
- * 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

@@ -1,136 +0,0 @@
-/**
- * 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

@@ -1,162 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-/**
- * 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';