@almadar/cli 1.0.6 → 1.0.8

package/shells/typescript-shell/packages/client/src/components/atoms/Spacer.tsx

@@ -1,68 +0,0 @@
-/**
- * Spacer Component
- * 
- * A flexible spacer that expands to fill available space in a flex container.
- * Useful for pushing elements apart or creating consistent spacing.
- */
-import React from 'react';
-import { cn } from '../../lib/cn';
-
-export type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
-
-export interface SpacerProps {
-  /** Fixed size (auto = flex grow) */
-  size?: SpacerSize;
-  /** Orientation (for fixed sizes) */
-  axis?: 'horizontal' | 'vertical';
-  /** Custom class name */
-  className?: string;
-}
-
-const horizontalSizes: Record<Exclude<SpacerSize, 'auto'>, string> = {
-  xs: 'w-1',
-  sm: 'w-2',
-  md: 'w-4',
-  lg: 'w-6',
-  xl: 'w-8',
-  '2xl': 'w-12',
-};
-
-const verticalSizes: Record<Exclude<SpacerSize, 'auto'>, string> = {
-  xs: 'h-1',
-  sm: 'h-2',
-  md: 'h-4',
-  lg: 'h-6',
-  xl: 'h-8',
-  '2xl': 'h-12',
-};
-
-/**
- * Spacer - Flexible spacing element for flex layouts
- * 
- * Usage:
- * - size="auto" (default): Expands to fill available space (flex: 1)
- * - size="md": Fixed size spacing
- */
-export const Spacer: React.FC<SpacerProps> = ({
-  size = 'auto',
-  axis = 'horizontal',
-  className,
-}) => {
-  if (size === 'auto') {
-    return <div className={cn('flex-1', className)} aria-hidden="true" />;
-  }
-
-  const sizeClass = axis === 'horizontal' 
-    ? horizontalSizes[size] 
-    : verticalSizes[size];
-
-  return (
-    <div 
-      className={cn('flex-shrink-0', sizeClass, className)} 
-      aria-hidden="true" 
-    />
-  );
-};
-
-export default Spacer;
-

package/shells/typescript-shell/packages/client/src/components/atoms/Spinner.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { cn } from "../../lib/cn";
-import { Loader2 } from "lucide-react";
-
-export type SpinnerSize = "xs" | "sm" | "md" | "lg";
-
-export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-  size?: SpinnerSize;
-}
-
-const sizeStyles: Record<SpinnerSize, string> = {
-  xs: "h-3 w-3",
-  sm: "h-4 w-4",
-  md: "h-6 w-6",
-  lg: "h-8 w-8",
-};
-
-export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
-  ({ className, size = "md", ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn("text-[var(--color-foreground)]", className)}
-        {...props}
-      >
-        <Loader2 className={cn("animate-spin", sizeStyles[size])} />
-      </div>
-    );
-  },
-);
-
-Spinner.displayName = "Spinner";

package/shells/typescript-shell/packages/client/src/components/atoms/Stack.tsx

@@ -1,151 +0,0 @@
-/**
- * Stack Component
- *
- * A layout primitive for arranging children in a vertical or horizontal stack with consistent spacing.
- * Includes convenience exports VStack and HStack for common use cases.
- */
-import React from "react";
-import { cn } from "../../lib/cn";
-
-export type StackDirection = "horizontal" | "vertical";
-export type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
-export type StackJustify =
-  | "start"
-  | "center"
-  | "end"
-  | "between"
-  | "around"
-  | "evenly";
-
-export interface StackProps {
-  /** Stack direction */
-  direction?: StackDirection;
-  /** Gap between children */
-  gap?: StackGap;
-  /** Align items on the cross axis */
-  align?: StackAlign;
-  /** Justify items on the main axis */
-  justify?: StackJustify;
-  /** Allow items to wrap */
-  wrap?: boolean;
-  /** Reverse the order of children */
-  reverse?: boolean;
-  /** Fill available space (flex: 1) */
-  flex?: boolean;
-  /** Custom class name */
-  className?: string;
-  /** Inline styles */
-  style?: React.CSSProperties;
-  /** Children elements */
-  children?: React.ReactNode;
-  /** HTML element to render as */
-  as?: React.ElementType;
-  /** Click handler */
-  onClick?: (e: React.MouseEvent) => void;
-  /** Keyboard handler */
-  onKeyDown?: (e: React.KeyboardEvent) => void;
-  /** Role for accessibility */
-  role?: string;
-  /** Tab index for focus management */
-  tabIndex?: number;
-}
-
-const gapStyles: Record<StackGap, string> = {
-  none: "gap-0",
-  xs: "gap-1",
-  sm: "gap-2",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8",
-  "2xl": "gap-12",
-};
-
-const alignStyles: Record<StackAlign, string> = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline",
-};
-
-const justifyStyles: Record<StackJustify, string> = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly",
-};
-
-/**
- * Stack - Flexible layout component for arranging children
- */
-export const Stack: React.FC<StackProps> = ({
-  direction = "vertical",
-  gap = "md",
-  align = "stretch",
-  justify = "start",
-  wrap = false,
-  reverse = false,
-  flex = false,
-  className,
-  style,
-  children,
-  as: Component = "div",
-  onClick,
-  onKeyDown,
-  role,
-  tabIndex,
-}) => {
-  const directionClass =
-    direction === "horizontal"
-      ? reverse
-        ? "flex-row-reverse"
-        : "flex-row"
-      : reverse
-        ? "flex-col-reverse"
-        : "flex-col";
-
-  return (
-    <Component
-      className={cn(
-        "flex",
-        directionClass,
-        gapStyles[gap],
-        alignStyles[align],
-        justifyStyles[justify],
-        wrap && "flex-wrap",
-        flex && "flex-1",
-        className,
-      )}
-      style={style}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      role={role}
-      tabIndex={tabIndex}
-    >
-      {children}
-    </Component>
-  );
-};
-
-/**
- * VStack - Vertical stack shorthand
- */
-export interface VStackProps extends Omit<StackProps, "direction"> {}
-
-export const VStack: React.FC<VStackProps> = (props) => (
-  <Stack direction="vertical" {...props} />
-);
-
-/**
- * HStack - Horizontal stack shorthand
- */
-export interface HStackProps extends Omit<StackProps, "direction"> {}
-
-export const HStack: React.FC<HStackProps> = (props) => (
-  <Stack direction="horizontal" {...props} />
-);
-
-export default Stack;

package/shells/typescript-shell/packages/client/src/components/atoms/Switch.tsx

@@ -1,91 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/cn";
-
-export interface SwitchProps {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  label?: string;
-  id?: string;
-  name?: string;
-  className?: string;
-}
-
-export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-  (
-    {
-      checked,
-      defaultChecked = false,
-      onChange,
-      disabled = false,
-      label,
-      id,
-      name,
-      className,
-    },
-    ref,
-  ) => {
-    const [isChecked, setIsChecked] = React.useState(
-      checked !== undefined ? checked : defaultChecked,
-    );
-
-    React.useEffect(() => {
-      if (checked !== undefined) {
-        setIsChecked(checked);
-      }
-    }, [checked]);
-
-    const handleClick = () => {
-      if (disabled) return;
-      const newValue = !isChecked;
-      if (checked === undefined) {
-        setIsChecked(newValue);
-      }
-      onChange?.(newValue);
-    };
-
-    return (
-      <div className={cn("inline-flex items-center gap-2", className)}>
-        <button
-          ref={ref}
-          type="button"
-          role="switch"
-          aria-checked={isChecked}
-          aria-label={label}
-          id={id}
-          name={name}
-          disabled={disabled}
-          onClick={handleClick}
-          className={cn(
-            "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-            isChecked ? "bg-primary" : "bg-muted",
-            disabled && "cursor-not-allowed opacity-50",
-          )}
-        >
-          <span
-            className={cn(
-              "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
-              isChecked ? "translate-x-5" : "translate-x-0",
-            )}
-          />
-        </button>
-        {label && (
-          <label
-            htmlFor={id}
-            className={cn(
-              "text-sm font-medium leading-none cursor-pointer",
-              disabled && "cursor-not-allowed opacity-70",
-            )}
-            onClick={handleClick}
-          >
-            {label}
-          </label>
-        )}
-      </div>
-    );
-  },
-);
-
-Switch.displayName = "Switch";

package/shells/typescript-shell/packages/client/src/components/atoms/TextHighlight.tsx

@@ -1,111 +0,0 @@
-/**
- * TextHighlight Atom Component
- *
- * A styled span component for highlighting text with annotations (questions or notes).
- * Uses different colors for different annotation types:
- * - Questions: Blue highlight
- * - Notes: Yellow highlight
- */
-
-import React from "react";
-import { cn } from "../../lib/cn";
-
-export type HighlightType = "question" | "note";
-
-export interface TextHighlightProps {
-  /**
-   * Type of highlight (determines color)
-   */
-  type: HighlightType;
-
-  /**
-   * Whether the highlight is currently active/focused
-   * @default false
-   */
-  isActive?: boolean;
-
-  /**
-   * Callback when highlight is clicked
-   */
-  onClick?: () => void;
-
-  /**
-   * Callback when highlight is hovered
-   */
-  onMouseEnter?: () => void;
-
-  /**
-   * Callback when hover ends
-   */
-  onMouseLeave?: () => void;
-
-  /**
-   * Unique ID for the annotation
-   */
-  annotationId?: string;
-
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-
-  /**
-   * Highlighted text content
-   */
-  children: React.ReactNode;
-}
-
-/**
- * TextHighlight component for rendering highlighted text annotations
- */
-export const TextHighlight: React.FC<TextHighlightProps> = ({
-  type,
-  isActive = false,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  annotationId,
-  className,
-  children,
-}) => {
-  const baseStyles = "cursor-pointer transition-all duration-150";
-
-  const typeStyles = {
-    question: cn(
-      // Blue border for questions
-      "bg-[var(--color-card)] border-b-2 border-primary-600",
-      "hover:bg-[var(--color-muted)]",
-      isActive && "bg-primary-100 ring-2 ring-primary-600",
-    ),
-    note: cn(
-      // Yellow border for notes
-      "bg-[var(--color-card)] border-b-2 border-amber-500",
-      "hover:bg-[var(--color-muted)]",
-      isActive && "bg-amber-100 ring-2 ring-amber-500",
-    ),
-  };
-
-  return (
-    <span
-      data-highlight="true"
-      data-highlight-type={type}
-      data-annotation-id={annotationId}
-      className={cn(baseStyles, typeStyles[type], className)}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      }}
-    >
-      {children}
-    </span>
-  );
-};
-
-TextHighlight.displayName = "TextHighlight";

package/shells/typescript-shell/packages/client/src/components/atoms/Textarea.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { cn } from "../../lib/cn";
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  error?: string;
-}
-
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, error, ...props }, ref) => {
-    return (
-      <textarea
-        ref={ref}
-        className={cn(
-          "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)]",
-          "px-3 py-2 text-sm text-[var(--color-foreground)]",
-          "bg-[var(--color-card)]",
-          "placeholder:text-[var(--color-placeholder)]",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
-          "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
-          "resize-y min-h-[80px]",
-          error
-            ? "border-[var(--color-error)] focus:border-[var(--color-error)]"
-            : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-
-Textarea.displayName = "Textarea";

package/shells/typescript-shell/packages/client/src/components/atoms/ThemeSelector.tsx

@@ -1,128 +0,0 @@
-/**
- * ThemeSelector - Design theme selector component
- *
- * A dropdown/toggle component for switching between design themes.
- *
- * @packageDocumentation
- */
-
-import React from "react";
-import {
-  useDesignTheme,
-  type DesignTheme,
-} from "../../context/DesignThemeContext";
-
-interface ThemeSelectorProps {
-  /** Optional className */
-  className?: string;
-  /** Show as dropdown or buttons */
-  variant?: "dropdown" | "buttons";
-  /** Show labels */
-  showLabels?: boolean;
-}
-
-const THEME_LABELS: Record<
-  string,
-  { label: string; icon: string; description: string }
-> = {
-  wireframe: {
-    label: "Wireframe",
-    icon: "📐",
-    description: "Sharp corners, thick borders",
-  },
-  minimalist: {
-    label: "Minimalist",
-    icon: "✨",
-    description: "Clean, subtle, refined",
-  },
-  almadar: {
-    label: "Almadar",
-    icon: "💎",
-    description: "Teal gradients, glowing accents",
-  },
-};
-
-/**
- * ThemeSelector component for switching design themes
- */
-export const ThemeSelector: React.FC<ThemeSelectorProps> = ({
-  className = "",
-  variant = "dropdown",
-  showLabels = true,
-}) => {
-  const { designTheme, setDesignTheme, availableThemes } = useDesignTheme();
-
-  if (variant === "buttons") {
-    return (
-      <div className={`flex gap-2 ${className}`}>
-        {availableThemes.map((theme) => {
-          const { label, icon } = THEME_LABELS[theme];
-          const isActive = designTheme === theme;
-
-          return (
-            <button
-              key={theme}
-              onClick={() => setDesignTheme(theme)}
-              className={`
-                px-3 py-2 text-sm font-medium transition-all
-                border-[length:var(--border-width)] rounded-[var(--radius-sm)]
-                ${
-                  isActive
-                    ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] border-[var(--color-primary)]"
-                    : "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] border-[var(--color-border)] hover:bg-[var(--color-secondary-hover)]"
-                }
-              `}
-              title={THEME_LABELS[theme].description}
-            >
-              {icon} {showLabels && label}
-            </button>
-          );
-        })}
-      </div>
-    );
-  }
-
-  // Dropdown variant
-  return (
-    <div className={`relative ${className}`}>
-      <select
-        value={designTheme}
-        onChange={(e) => setDesignTheme(e.target.value as DesignTheme)}
-        className={`
-          px-3 py-2 pr-8 text-sm font-medium
-          bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]
-          border-[length:var(--border-width)] border-[var(--color-border)]
-          rounded-[var(--radius-sm)]
-          cursor-pointer appearance-none
-          focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]
-        `}
-      >
-        {availableThemes.map((theme) => {
-          const { label, icon } = THEME_LABELS[theme];
-          return (
-            <option key={theme} value={theme}>
-              {icon} {label}
-            </option>
-          );
-        })}
-      </select>
-      <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
-        <svg
-          className="w-4 h-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </div>
-    </div>
-  );
-};
-
-export default ThemeSelector;

package/shells/typescript-shell/packages/client/src/components/atoms/ThemeToggle.tsx

@@ -1,91 +0,0 @@
-/**
- * ThemeToggle Atom Component
- *
- * A button that toggles between light and dark themes.
- * Uses Sun and Moon icons to indicate current/target theme.
- *
- * @packageDocumentation
- */
-
-import React from "react";
-import { Sun, Moon } from "lucide-react";
-import { cn } from "../../lib/cn";
-import { useTheme } from "../../context/ThemeContext";
-
-export interface ThemeToggleProps {
-  /** Additional CSS classes */
-  className?: string;
-  /** Size variant */
-  size?: "sm" | "md" | "lg";
-  /** Show label text */
-  showLabel?: boolean;
-}
-
-const sizeClasses = {
-  sm: "p-1.5",
-  md: "p-2",
-  lg: "p-2.5",
-};
-
-const iconSizes = {
-  sm: "h-4 w-4",
-  md: "h-5 w-5",
-  lg: "h-6 w-6",
-};
-
-/**
- * ThemeToggle component for switching between light and dark modes
- *
- * @example
- * ```tsx
- * // Basic usage
- * <ThemeToggle />
- *
- * // With label
- * <ThemeToggle showLabel />
- *
- * // Custom size
- * <ThemeToggle size="lg" />
- * ```
- */
-export const ThemeToggle: React.FC<ThemeToggleProps> = ({
-  className,
-  size = "md",
-  showLabel = false,
-}) => {
-  const { resolvedMode, toggleMode } = useTheme();
-  const isDark = resolvedMode === "dark";
-
-  return (
-    <button
-      type="button"
-      onClick={toggleMode}
-      className={cn(
-        "inline-flex items-center justify-center gap-2",
-        "text-[var(--color-foreground)]",
-        "hover:bg-[var(--color-muted)] border-[length:var(--border-width)] border-transparent hover:border-[var(--color-border)]",
-        "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
-        "transition-colors duration-200",
-        sizeClasses[size],
-        className,
-      )}
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
-    >
-      {isDark ? (
-        <Sun
-          className={cn(iconSizes[size], "text-[var(--color-foreground)]")}
-        />
-      ) : (
-        <Moon
-          className={cn(iconSizes[size], "text-[var(--color-foreground)]")}
-        />
-      )}
-      {showLabel && (
-        <span className="text-sm font-medium">{isDark ? "Light" : "Dark"}</span>
-      )}
-    </button>
-  );
-};
-
-ThemeToggle.displayName = "ThemeToggle";