Update React Editor integration and clean up template

components/ui/command.tsx

@@ -36,8 +36,6 @@ function CommandDialog({
   children,
   className,
   showCloseButton = true,
-  // Forwarded to the inner Command so callers can drive filtering themselves
-  // (e.g. results already filtered server-side).
   shouldFilter,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
@@ -56,7 +54,6 @@ function CommandDialog({
       <DialogContent
         className={cn(
           "overflow-hidden p-0",
-          // No fade/zoom on the command palette — it should appear instantly.
           "transition-none animate-none duration-0",
           "data-[state=closed]:animate-none data-[state=open]:animate-none",
           className

components/ui/input-group.tsx

@@ -17,16 +17,13 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
-        // Variants based on alignment.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
         "has-[>[data-align=inline-end]]:[&>input]:pr-2",
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
-        // Focus state.
         "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
 
-        // Error state.
         "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
         className

components/ui/item.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
-// Utility function to combine classNames
 function cn(...classes: (string | undefined | null | false)[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-// Item variants helper
 function getItemVariants(
   variant: 'default' | 'outline' | 'muted',
   size: 'default' | 'sm'
@@ -27,7 +25,6 @@ function getItemVariants(
   return cn(baseStyles, variantStyles[variant], sizeStyles[size]);
 }
 
-// Item media variants helper
 function getItemMediaVariants(variant: 'default' | 'icon' | 'image'): string {
   const baseStyles =
     'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5';

components/ui/progress.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-// Utility function to combine classNames
 function cn(...classes: (string | undefined | null | false)[]): string {
   return classes.filter(Boolean).join(' ');
 }

components/ui/remix-icon.tsx

@@ -16,12 +16,10 @@ const RemixIcon: React.FC<RemixIconProps> = ({
 }) => {
   if (!name) return null;
 
-  // Normalise: accept "RiTruckLine", "ri-truck-line", or "riTruckLine"
+  // Accept component, kebab-case, or camelCase icon names.
   const normalised = name
-    // ri-truck-line → RiTruckLine
     .replace(/^ri-/, 'Ri')
     .replace(/-([a-z])/g, (_, c) => c.toUpperCase())
-    // ensure first char is uppercase
     .replace(/^./, (c) => c.toUpperCase());
 
   const IconComponent = (