@mostrom/app-shell 0.1.3 → 0.1.5

package/src/components/patterns/p-navigation-menu-4.tsx

@@ -0,0 +1,130 @@
+import { Button } from "@/components/ui/button"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
+import { UserIcon, BuildingIcon, CircleDollarSignIcon, LayoutGridIcon, SparklesIcon, RadioIcon } from "lucide-react"
+
+const industries = [
+  {
+    title: "Individuals",
+    description: "Keep your finances organized.",
+    href: "#",
+    icon: (
+      <UserIcon
+      />
+    ),
+  },
+  {
+    title: "LLCs",
+    description: "Benefit from tax write-offs.",
+    href: "#",
+    icon: (
+      <BuildingIcon
+      />
+    ),
+  },
+  {
+    title: "Freelancers",
+    description: "For independent workers.",
+    href: "#",
+    icon: (
+      <CircleDollarSignIcon
+      />
+    ),
+  },
+  {
+    title: "Investors",
+    description: "Make and grow your money.",
+    href: "#",
+    icon: (
+      <LayoutGridIcon
+      />
+    ),
+  },
+  {
+    title: "Small businesses",
+    description: "We take care of your taxes.",
+    href: "#",
+    icon: (
+      <SparklesIcon
+      />
+    ),
+  },
+  {
+    title: "Crypto",
+    description: "For tech enthusiasts.",
+    href: "#",
+    icon: (
+      <CircleDollarSignIcon
+      />
+    ),
+  },
+  {
+    title: "Big companies",
+    description: "Run your finances easily.",
+    href: "#",
+    icon: (
+      <BuildingIcon
+      />
+    ),
+  },
+  {
+    title: "Investments",
+    description: "Launch your ideas worldwide.",
+    href: "#",
+    icon: (
+      <RadioIcon
+      />
+    ),
+  },
+]
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Industries</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-[500px]">
+                <ul className="grid grid-cols-2 gap-1">
+                  {industries.map((item) => (
+                    <li key={item.title}>
+                      <NavigationMenuLink
+                        asChild
+                        className="flex items-start gap-2 p-3"
+                      >
+                        <a href="#">
+                          {item.icon}
+                          <div className="flex flex-col gap-0.5">
+                            <div className="text-sm leading-none font-medium">
+                              {item.title}
+                            </div>
+                            <p className="text-muted-foreground text-xs leading-snug">
+                              {item.description}
+                            </p>
+                          </div>
+                        </a>
+                      </NavigationMenuLink>
+                    </li>
+                  ))}
+                </ul>
+                <div className="mt-2 px-1 pb-1">
+                  <Button className="w-full" asChild>
+                    <a href="#">Learn more</a>
+                  </Button>
+                </div>
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  )
+}

package/src/components/reui/filters.tsx

@@ -251,10 +251,10 @@ function FilterInput<T = unknown>({
   className?: string
   field?: FilterFieldConfig<T>
 }) {
-  const context = useFilterContext()
   const [isValid, setIsValid] = useState(true)
   const [validationMessage, setValidationMessage] = useState("")
   const inputRef = useRef<HTMLInputElement>(null)
+  const context = useFilterContext()
 
   useEffect(() => {
     if (props.autoFocus) {
@@ -396,12 +396,6 @@ function FilterRemoveButton({
 }: FilterRemoveButtonProps) {
   const context = useFilterContext()
 
-  const sizeMap = {
-    sm: "sm" as const,
-    default: "sm" as const,
-    lg: "default" as const,
-  }
-
   return (
     <Button
       variant="outline"
@@ -984,7 +978,6 @@ function FilterValueSelector<T = unknown>({
   operator,
   autoFocus,
 }: FilterValueSelectorProps<T>) {
-  const context = useFilterContext()
 
   if (operator === "empty" || operator === "not_empty") {
     return null

package/src/components/reui/index.ts

@@ -1,7 +1,6 @@
 // ReUI Components
 export * from "./alert";
 export * from "./autocomplete";
-export * from "./badge";
 export * from "./date-selector";
 export * from "./filters";
 export * from "./frame";

package/src/components/ui/field.tsx

@@ -3,7 +3,7 @@
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 

package/src/components/ui/index.ts

@@ -23,6 +23,8 @@ export * from "./navigation-menu";
 export * from "./popover";
 export * from "./scroll-area";
 export * from "./select";
+export * from "./simple-select";
+export * from "./simple-input";
 export * from "./separator";
 export * from "./sheet";
 export * from "./space-between";

package/src/components/ui/label.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Label as LabelPrimitive } from "radix-ui"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 
 function Label({
   className,

package/src/components/ui/select.tsx

@@ -1,10 +1,8 @@
-"use client"
-
 import * as React from "react"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 
 function Select({
   ...props

package/src/components/ui/separator.tsx

@@ -1,7 +1,9 @@
+"use client"
+
 import * as React from "react"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 
 function Separator({
   className,

package/src/components/ui/simple-input.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+/** Props for SimpleInput component - Cloudscape-compatible API */
+export interface SimpleInputProps {
+  /** Current value of the input */
+  value: string
+  /** Callback when value changes - matches Cloudscape pattern */
+  onChange: (event: { detail: { value: string } }) => void
+  /** Input type */
+  type?: "text" | "number" | "search" | "email" | "url" | "password" | "tel"
+  /** Input mode for mobile keyboards */
+  inputMode?: "text" | "numeric" | "decimal" | "email" | "tel" | "url" | "search" | "none"
+  /** Placeholder text */
+  placeholder?: string
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** Whether the input is read-only */
+  readOnly?: boolean
+  /** Whether the input should auto-focus */
+  autoFocus?: boolean
+  /** Aria label for accessibility */
+  ariaLabel?: string
+  /** Additional className */
+  className?: string
+  /** Name attribute */
+  name?: string
+  /** Auto-complete attribute */
+  autoComplete?: string
+  /** Whether the input is invalid */
+  invalid?: boolean
+  /** Step for number inputs */
+  step?: number | string
+  /** Min value for number inputs */
+  min?: number | string
+  /** Max value for number inputs */
+  max?: number | string
+}
+
+/**
+ * SimpleInput - An input component with Cloudscape-compatible API.
+ *
+ * Provides a declarative API similar to Cloudscape Input while using
+ * the app-shell styling.
+ *
+ * @example
+ * ```tsx
+ * <SimpleInput
+ *   value={name}
+ *   onChange={({ detail }) => setName(detail.value)}
+ *   placeholder="Enter your name"
+ * />
+ * ```
+ *
+ * @example Number input
+ * ```tsx
+ * <SimpleInput
+ *   type="number"
+ *   value={String(amount)}
+ *   onChange={({ detail }) => setAmount(parseInt(detail.value, 10) || 0)}
+ *   placeholder="0"
+ * />
+ * ```
+ */
+export function SimpleInput({
+  value,
+  onChange,
+  type = "text",
+  inputMode,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  autoFocus = false,
+  ariaLabel,
+  className,
+  name,
+  autoComplete,
+  invalid = false,
+  step,
+  min,
+  max,
+}: SimpleInputProps) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ detail: { value: event.target.value } })
+  }
+
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      autoFocus={autoFocus}
+      aria-label={ariaLabel}
+      aria-invalid={invalid || undefined}
+      name={name}
+      autoComplete={autoComplete}
+      inputMode={inputMode}
+      step={step}
+      min={min}
+      max={max}
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+    />
+  )
+}

package/src/components/ui/simple-select.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+/** Option type for SimpleSelect */
+export interface SelectOption {
+  /** Display label for the option */
+  label: string
+  /** Value of the option */
+  value: string
+  /** Optional description shown below the label */
+  description?: string
+  /** Whether the option is disabled */
+  disabled?: boolean
+}
+
+/** Grouped options type for SimpleSelect */
+export interface SelectOptionGroup {
+  /** Group label */
+  label: string
+  /** Options in this group */
+  options: SelectOption[]
+}
+
+/** Props for SimpleSelect component */
+export interface SimpleSelectProps {
+  /** Currently selected option */
+  selectedOption: SelectOption | null
+  /** Callback when selection changes - matches Cloudscape pattern */
+  onChange: (event: { detail: { selectedOption: SelectOption } }) => void
+  /** Options to display - can be flat array or grouped */
+  options: (SelectOption | SelectOptionGroup)[]
+  /** Placeholder text when no option is selected */
+  placeholder?: string
+  /** Whether the select is disabled */
+  disabled?: boolean
+  /** Enable filtering/search - "auto" enables search */
+  filteringType?: "auto" | "none"
+  /** Additional className for the trigger */
+  className?: string
+  /** Trigger size */
+  size?: "sm" | "default"
+}
+
+/** Type guard to check if an option is a group */
+function isOptionGroup(option: SelectOption | SelectOptionGroup): option is SelectOptionGroup {
+  return "options" in option && Array.isArray(option.options)
+}
+
+/** Flatten grouped options into a flat list */
+function flattenOptions(options: (SelectOption | SelectOptionGroup)[]): SelectOption[] {
+  return options.flatMap((opt) => (isOptionGroup(opt) ? opt.options : [opt]))
+}
+
+/**
+ * SimpleSelect - A select component with Cloudscape-compatible API.
+ *
+ * Provides a declarative API similar to Cloudscape Select while using
+ * custom dropdown implementation for flexibility.
+ *
+ * @example
+ * ```tsx
+ * <SimpleSelect
+ *   selectedOption={selectedOption}
+ *   onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+ *   options={[
+ *     { label: "Option 1", value: "1" },
+ *     { label: "Option 2", value: "2" },
+ *   ]}
+ *   placeholder="Select an option"
+ * />
+ * ```
+ *
+ * @example With grouped options
+ * ```tsx
+ * <SimpleSelect
+ *   selectedOption={selectedTimezone}
+ *   onChange={({ detail }) => setSelectedTimezone(detail.selectedOption)}
+ *   options={[
+ *     { label: "Americas", options: [
+ *       { label: "New York", value: "America/New_York" },
+ *       { label: "Los Angeles", value: "America/Los_Angeles" },
+ *     ]},
+ *     { label: "Europe", options: [
+ *       { label: "London", value: "Europe/London" },
+ *       { label: "Paris", value: "Europe/Paris" },
+ *     ]},
+ *   ]}
+ *   filteringType="auto"
+ * />
+ * ```
+ */
+export function SimpleSelect({
+  selectedOption,
+  onChange,
+  options,
+  placeholder = "Select...",
+  disabled = false,
+  filteringType = "none",
+  className,
+  size = "default",
+}: SimpleSelectProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [filterText, setFilterText] = React.useState("")
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const isSearchable = filteringType === "auto"
+
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+        setFilterText("")
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [isOpen])
+
+  // Focus input when dropdown opens (for searchable selects)
+  React.useEffect(() => {
+    if (isOpen && isSearchable && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isOpen, isSearchable])
+
+  // Handle keyboard navigation
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) return
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        if (!isOpen) {
+          event.preventDefault()
+          setIsOpen(true)
+        }
+        break
+      case "Escape":
+        setIsOpen(false)
+        setFilterText("")
+        break
+      case "ArrowDown":
+        if (!isOpen) {
+          event.preventDefault()
+          setIsOpen(true)
+        }
+        break
+    }
+  }
+
+  const handleSelect = (option: SelectOption) => {
+    onChange({ detail: { selectedOption: option } })
+    setIsOpen(false)
+    setFilterText("")
+  }
+
+  // Filter options based on search text
+  const getFilteredOptions = (): (SelectOption | SelectOptionGroup)[] => {
+    if (!filterText.trim()) return options
+
+    const searchLower = filterText.toLowerCase()
+
+    return options
+      .map((opt) => {
+        if (isOptionGroup(opt)) {
+          const filteredGroupOptions = opt.options.filter(
+            (o) =>
+              o.label.toLowerCase().includes(searchLower) ||
+              o.value.toLowerCase().includes(searchLower) ||
+              o.description?.toLowerCase().includes(searchLower)
+          )
+          if (filteredGroupOptions.length === 0) return null
+          return { ...opt, options: filteredGroupOptions }
+        }
+        const matches =
+          opt.label.toLowerCase().includes(searchLower) ||
+          opt.value.toLowerCase().includes(searchLower) ||
+          opt.description?.toLowerCase().includes(searchLower)
+        return matches ? opt : null
+      })
+      .filter(Boolean) as (SelectOption | SelectOptionGroup)[]
+  }
+
+  const filteredOptions = getFilteredOptions()
+  const allOptions = flattenOptions(options)
+
+  const renderOption = (option: SelectOption, index: number) => {
+    const isSelected = selectedOption?.value === option.value
+    return (
+      <div
+        key={`${option.value}-${index}`}
+        role="option"
+        aria-selected={isSelected}
+        className={cn(
+          "relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+          "hover:bg-accent hover:text-accent-foreground",
+          isSelected && "bg-accent/50",
+          option.disabled && "pointer-events-none opacity-50"
+        )}
+        onClick={() => !option.disabled && handleSelect(option)}
+      >
+        <span className="absolute right-2 flex size-3.5 items-center justify-center">
+          {isSelected && <CheckIcon className="size-4" />}
+        </span>
+        <div className="flex flex-col gap-0.5">
+          <span>{option.label}</span>
+          {option.description && (
+            <span className="text-muted-foreground text-xs">{option.description}</span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const renderOptions = () => {
+    if (filteredOptions.length === 0) {
+      return (
+        <div className="text-muted-foreground py-2 text-center text-sm">
+          {allOptions.length === 0 ? "No options available" : "No options found"}
+        </div>
+      )
+    }
+
+    return filteredOptions.map((opt, index) => {
+      if (isOptionGroup(opt)) {
+        return (
+          <div key={`group-${opt.label}-${index}`}>
+            <div className="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+              {opt.label}
+            </div>
+            {opt.options.map((groupOpt, gIndex) => renderOption(groupOpt, gIndex))}
+          </div>
+        )
+      }
+      return renderOption(opt, index)
+    })
+  }
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        role="combobox"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        disabled={disabled}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
+          "focus-visible:border-ring focus-visible:ring-ring/50",
+          "flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm",
+          "whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          size === "default" ? "h-9" : "h-8",
+          className
+        )}
+      >
+        <span className={cn("truncate", !selectedOption && "text-muted-foreground")}>
+          {selectedOption?.label ?? placeholder}
+        </span>
+        <ChevronDownIcon className="size-4 shrink-0 opacity-50" />
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div
+          role="listbox"
+          className={cn(
+            "bg-popover text-popover-foreground absolute z-50 mt-1 w-full min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+            "animate-in fade-in-0 zoom-in-95"
+          )}
+        >
+          {/* Search Input */}
+          {isSearchable && (
+            <div className="border-b p-2">
+              <div className="relative">
+                <SearchIcon className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2" />
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={filterText}
+                  onChange={(e) => setFilterText(e.target.value)}
+                  placeholder="Search..."
+                  className={cn(
+                    "border-input placeholder:text-muted-foreground focus-visible:ring-ring/50",
+                    "h-8 w-full rounded-md border bg-transparent py-1 pr-3 pl-8 text-sm outline-none",
+                    "focus-visible:border-ring focus-visible:ring-[3px]"
+                  )}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Options List */}
+          <div className="max-h-[300px] overflow-y-auto p-1">{renderOptions()}</div>
+        </div>
+      )}
+    </div>
+  )
+}

package/.claude/ralph-loop.local.md

@@ -1,9 +0,0 @@
----
-active: true
-iteration: 1
-max_iterations: 0
-completion_promise: null
-started_at: "2026-02-13T12:51:42Z"
----
-
-Without diverging from the drawer requirements in @docs/prompts/todo/drawer-fields.md ensure the drawer layout wise and style wise mimics this exact image docs/prompts/todo/Screenshot 2026-02-12 at 18.19.47.png and use playwright to take screenshots and do a comparison until the layouts match 100%