@builderos/create-agent-os 0.0.2

package/src/template/design/src/components/ShellDesignPage.tsx

@@ -0,0 +1,242 @@
+import { Suspense, useMemo, useState, useRef, useCallback, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ArrowLeft, PanelLeft, Maximize2, GripVertical, Smartphone, Tablet, Monitor } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { ThemeToggle } from '@/components/ThemeToggle'
+import { loadShellPreview } from '@/lib/shell-loader'
+import React from 'react'
+
+const MIN_WIDTH = 320
+const DEFAULT_WIDTH_PERCENT = 100
+
+export function ShellDesignPage() {
+  const navigate = useNavigate()
+  const [widthPercent, setWidthPercent] = useState(DEFAULT_WIDTH_PERCENT)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const isDragging = useRef(false)
+
+  // Handle resize drag
+  const handleMouseDown = useCallback(() => {
+    isDragging.current = true
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current || !containerRef.current) return
+
+      const containerRect = containerRef.current.getBoundingClientRect()
+      const containerWidth = containerRect.width
+      const containerCenter = containerRect.left + containerWidth / 2
+
+      // Calculate distance from center
+      const distanceFromCenter = Math.abs(e.clientX - containerCenter)
+      const maxDistance = containerWidth / 2
+
+      // Convert to percentage (distance from center * 2 = total width)
+      let newWidthPercent = (distanceFromCenter / maxDistance) * 100
+
+      // Clamp between min width and 100%
+      const minPercent = (MIN_WIDTH / containerWidth) * 100
+      newWidthPercent = Math.max(minPercent, Math.min(100, newWidthPercent))
+
+      setWidthPercent(newWidthPercent)
+    }
+
+    const handleMouseUp = () => {
+      isDragging.current = false
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    document.body.style.cursor = 'ew-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  const previewWidth = `${widthPercent}%`
+
+  return (
+    <div className="h-screen bg-stone-100 dark:bg-stone-900 animate-fade-in flex flex-col overflow-hidden">
+      {/* Header */}
+      <header className="border-b border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-950 shrink-0 z-50">
+        <div className="px-4 py-2 flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/design')}
+            className="text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 -ml-2"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" strokeWidth={1.5} />
+            Back
+          </Button>
+          <div className="h-4 w-px bg-stone-200 dark:bg-stone-700" />
+          <div className="flex items-center gap-2">
+            <PanelLeft className="w-4 h-4 text-stone-400" strokeWidth={1.5} />
+            <span className="text-sm font-medium text-stone-700 dark:text-stone-300">
+              Shell Design
+            </span>
+          </div>
+
+          {/* Width indicator and device presets */}
+          <div className="ml-auto flex items-center gap-4">
+            {/* Device size presets */}
+            <div className="flex items-center gap-1 border-r border-stone-200 dark:border-stone-700 pr-4">
+              <button
+                onClick={() => setWidthPercent(30)}
+                className={`p-1.5 rounded transition-colors ${
+                  widthPercent <= 40
+                    ? 'bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-100'
+                    : 'text-stone-400 dark:text-stone-500 hover:text-stone-600 dark:hover:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-800'
+                }`}
+                title="Mobile (30%)"
+              >
+                <Smartphone className="w-4 h-4" strokeWidth={1.5} />
+              </button>
+              <button
+                onClick={() => setWidthPercent(60)}
+                className={`p-1.5 rounded transition-colors ${
+                  widthPercent > 40 && widthPercent <= 60
+                    ? 'bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-100'
+                    : 'text-stone-400 dark:text-stone-500 hover:text-stone-600 dark:hover:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-800'
+                }`}
+                title="Tablet (60%)"
+              >
+                <Tablet className="w-4 h-4" strokeWidth={1.5} />
+              </button>
+              <button
+                onClick={() => setWidthPercent(100)}
+                className={`p-1.5 rounded transition-colors ${
+                  widthPercent > 60
+                    ? 'bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-100'
+                    : 'text-stone-400 dark:text-stone-500 hover:text-stone-600 dark:hover:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-800'
+                }`}
+                title="Desktop (100%)"
+              >
+                <Monitor className="w-4 h-4" strokeWidth={1.5} />
+              </button>
+            </div>
+            <span className="text-xs text-stone-500 dark:text-stone-400 font-mono w-10 text-right">
+              {Math.round(widthPercent)}%
+            </span>
+            <ThemeToggle />
+            <a
+              href="/shell/design/fullscreen"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 text-xs text-stone-500 dark:text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 transition-colors"
+            >
+              <Maximize2 className="w-3.5 h-3.5" strokeWidth={1.5} />
+              Fullscreen
+            </a>
+          </div>
+        </div>
+      </header>
+
+      {/* Preview area with resizable container */}
+      <div
+        ref={containerRef}
+        className="flex-1 overflow-hidden flex items-stretch justify-center p-6"
+      >
+        {/* Left resize handle */}
+        <div
+          className="w-4 flex items-center justify-center cursor-ew-resize group shrink-0"
+          onMouseDown={handleMouseDown}
+        >
+          <div className="w-1 h-16 rounded-full bg-stone-300 dark:bg-stone-600 group-hover:bg-stone-400 dark:group-hover:bg-stone-500 transition-colors flex items-center justify-center">
+            <GripVertical className="w-3 h-3 text-stone-500 dark:text-stone-400 opacity-0 group-hover:opacity-100 transition-opacity" strokeWidth={2} />
+          </div>
+        </div>
+
+        {/* Preview container using iframe for true isolation */}
+        <div
+          className="bg-white dark:bg-stone-950 rounded-lg shadow-xl border border-stone-200 dark:border-stone-700 overflow-hidden"
+          style={{ width: previewWidth, minWidth: MIN_WIDTH, maxWidth: '100%' }}
+        >
+          <iframe
+            src="/shell/design/fullscreen"
+            className="w-full h-full border-0"
+            title="Shell Preview"
+          />
+        </div>
+
+        {/* Right resize handle */}
+        <div
+          className="w-4 flex items-center justify-center cursor-ew-resize group shrink-0"
+          onMouseDown={handleMouseDown}
+        >
+          <div className="w-1 h-16 rounded-full bg-stone-300 dark:bg-stone-600 group-hover:bg-stone-400 dark:group-hover:bg-stone-500 transition-colors flex items-center justify-center">
+            <GripVertical className="w-3 h-3 text-stone-500 dark:text-stone-400 opacity-0 group-hover:opacity-100 transition-opacity" strokeWidth={2} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Fullscreen version of the shell preview (for screenshots)
+ * Syncs theme with parent window via localStorage
+ */
+export function ShellDesignFullscreen() {
+  const shellPreviewLoader = loadShellPreview()
+
+  const ShellPreviewComponent = useMemo(() => {
+    if (!shellPreviewLoader) return null
+    return React.lazy(shellPreviewLoader)
+  }, [shellPreviewLoader])
+
+  // Sync theme with parent window
+  useEffect(() => {
+    const applyTheme = () => {
+      const theme = localStorage.getItem('theme') || 'system'
+      const root = document.documentElement
+
+      if (theme === 'system') {
+        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+        root.classList.toggle('dark', systemDark)
+      } else {
+        root.classList.toggle('dark', theme === 'dark')
+      }
+    }
+
+    // Apply on mount
+    applyTheme()
+
+    // Listen for storage changes (from parent window)
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === 'theme') {
+        applyTheme()
+      }
+    }
+    window.addEventListener('storage', handleStorageChange)
+
+    // Also poll for changes since storage event doesn't fire in same window
+    const interval = setInterval(applyTheme, 100)
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange)
+      clearInterval(interval)
+    }
+  }, [])
+
+  if (!ShellPreviewComponent) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <p className="text-stone-600 dark:text-stone-400">Shell preview not found.</p>
+      </div>
+    )
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <div className="h-screen flex items-center justify-center bg-background">
+          <div className="text-stone-500 dark:text-stone-400">Loading...</div>
+        </div>
+      }
+    >
+      <ShellPreviewComponent />
+    </Suspense>
+  )
+}

package/src/template/design/src/components/SpecCard.tsx

@@ -0,0 +1,121 @@
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { ChevronDown, PanelTop, Square } from 'lucide-react'
+import { EmptyState } from '@/components/EmptyState'
+import type { ParsedSpec } from '@/types/section'
+
+interface SpecCardProps {
+  spec: ParsedSpec | null
+  sectionTitle?: string
+  sectionId?: string
+}
+
+export function SpecCard({ spec, sectionTitle, sectionId }: SpecCardProps) {
+  const [userFlowsOpen, setUserFlowsOpen] = useState(false)
+  const [uiReqOpen, setUiReqOpen] = useState(false)
+
+  // Empty state
+  if (!spec) {
+    return <EmptyState type="spec" context={sectionTitle} contextId={sectionId} />
+  }
+
+  return (
+    <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+          {sectionTitle || 'Specification'}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Overview */}
+        {spec.overview && (
+          <p className="text-stone-600 dark:text-stone-400 leading-relaxed">
+            {spec.overview}
+          </p>
+        )}
+
+        {/* User Flows - Expandable */}
+        {spec.userFlows.length > 0 && (
+          <Collapsible open={userFlowsOpen} onOpenChange={setUserFlowsOpen}>
+            <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-left group">
+              <span className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide">
+                User Flows
+                <span className="ml-2 text-stone-400 dark:text-stone-500 normal-case tracking-normal">
+                  ({spec.userFlows.length})
+                </span>
+              </span>
+              <ChevronDown
+                className={`w-4 h-4 text-stone-400 dark:text-stone-500 transition-transform ${userFlowsOpen ? 'rotate-180' : ''
+                  }`}
+                strokeWidth={1.5}
+              />
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <ul className="space-y-2 pt-2">
+                {spec.userFlows.map((flow, index) => (
+                  <li key={index} className="flex items-start gap-3">
+                    <span className="w-1.5 h-1.5 rounded-full bg-stone-900 dark:bg-stone-100 mt-2 shrink-0" />
+                    <span className="text-stone-700 dark:text-stone-300 text-sm">
+                      {flow}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </CollapsibleContent>
+          </Collapsible>
+        )}
+
+        {/* UI Requirements - Expandable */}
+        {spec.uiRequirements.length > 0 && (
+          <Collapsible open={uiReqOpen} onOpenChange={setUiReqOpen}>
+            <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-left group">
+              <span className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide">
+                UI Requirements
+                <span className="ml-2 text-stone-400 dark:text-stone-500 normal-case tracking-normal">
+                  ({spec.uiRequirements.length})
+                </span>
+              </span>
+              <ChevronDown
+                className={`w-4 h-4 text-stone-400 dark:text-stone-500 transition-transform ${uiReqOpen ? 'rotate-180' : ''
+                  }`}
+                strokeWidth={1.5}
+              />
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <ul className="space-y-2 pt-2">
+                {spec.uiRequirements.map((req, index) => (
+                  <li key={index} className="flex items-start gap-3">
+                    <span className="w-1.5 h-1.5 rounded-full bg-stone-900 dark:bg-stone-100 mt-2 shrink-0" />
+                    <span className="text-stone-700 dark:text-stone-300 text-sm">
+                      {req}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </CollapsibleContent>
+          </Collapsible>
+        )}
+
+        {/* Display Configuration */}
+        <div className="flex items-center gap-2 pt-2 border-t border-stone-100 dark:border-stone-800">
+          {spec.useShell ? (
+            <>
+              <PanelTop className="w-4 h-4 text-stone-400 dark:text-stone-500" strokeWidth={1.5} />
+              <span className="text-sm text-stone-500 dark:text-stone-400">
+                Displays inside app shell
+              </span>
+            </>
+          ) : (
+            <>
+              <Square className="w-4 h-4 text-stone-400 dark:text-stone-500" strokeWidth={1.5} />
+              <span className="text-sm text-stone-500 dark:text-stone-400">
+                Standalone page (no shell)
+              </span>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/template/design/src/components/StepIndicator.tsx

@@ -0,0 +1,75 @@
+import { Check, ArrowRight, AlertTriangle } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+export type StepStatus = 'completed' | 'current' | 'upcoming' | 'skipped'
+
+interface StepIndicatorProps {
+  step: number
+  status: StepStatus
+  children: ReactNode
+  isLast?: boolean
+}
+
+export function StepIndicator({ step, status, children, isLast = false }: StepIndicatorProps) {
+  return (
+    <div className="relative">
+      {/* Vertical connecting line - extends from this step to the next */}
+      {!isLast && (
+        <div
+          className="absolute left-[10px] top-[28px] w-[2px] h-[calc(100%+16px)] bg-stone-200 dark:bg-stone-700"
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Step badge positioned at top-left */}
+      <div className="absolute -left-[2px] top-0 z-10">
+        <StepBadge step={step} status={status} />
+      </div>
+
+      {/* Card content with left padding to accommodate the step indicator */}
+      <div className="pl-10">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface StepBadgeProps {
+  step: number
+  status: StepStatus
+}
+
+function StepBadge({ step, status }: StepBadgeProps) {
+  const baseClasses = "w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold transition-all duration-200"
+
+  if (status === 'completed') {
+    return (
+      <div className={`${baseClasses} bg-stone-200 dark:bg-stone-700 text-stone-500 dark:text-stone-400`}>
+        <Check className="w-3 h-3" strokeWidth={2.5} />
+      </div>
+    )
+  }
+
+  if (status === 'current') {
+    return (
+      <div className={`${baseClasses} bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 shadow-sm`}>
+        <ArrowRight className="w-3 h-3" strokeWidth={2.5} />
+      </div>
+    )
+  }
+
+  if (status === 'skipped') {
+    return (
+      <div className={`${baseClasses} bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400`}>
+        <AlertTriangle className="w-3 h-3" strokeWidth={2.5} />
+      </div>
+    )
+  }
+
+  // upcoming
+  return (
+    <div className={`${baseClasses} bg-stone-200 dark:bg-stone-700 text-stone-500 dark:text-stone-400`}>
+      {step}
+    </div>
+  )
+}

package/src/template/design/src/components/ThemeToggle.tsx

@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+type Theme = 'light' | 'dark' | 'system'
+
+export function ThemeToggle({ headless }: { headless?: boolean }) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window !== 'undefined') {
+      // Check URL param first (from Agent OS)
+      const params = new URLSearchParams(window.location.search)
+      const urlTheme = params.get('theme') as Theme
+      if (urlTheme && ['light', 'dark', 'system'].includes(urlTheme)) {
+        return urlTheme
+      }
+      return (localStorage.getItem('theme') as Theme) || 'system'
+    }
+    return 'system'
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+
+    const applyTheme = (theme: Theme) => {
+      if (theme === 'system') {
+        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+        root.classList.toggle('dark', systemDark)
+      } else {
+        root.classList.toggle('dark', theme === 'dark')
+      }
+    }
+
+    applyTheme(theme)
+    localStorage.setItem('theme', theme)
+
+    // Listen for system theme changes when in system mode
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = () => {
+      if (theme === 'system') {
+        applyTheme('system')
+      }
+    }
+    mediaQuery.addEventListener('change', handleChange)
+
+    // Listen for messages from Agent OS (Parent Window)
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'THEME_CHANGE' && event.data.theme) {
+        setTheme(event.data.theme as Theme)
+      }
+    }
+    window.addEventListener('message', handleMessage)
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [theme])
+
+  const toggleTheme = () => {
+    setTheme((prev) => {
+      if (prev === 'light') return 'dark'
+      if (prev === 'dark') return 'system'
+      return 'light'
+    })
+  }
+
+  const isDark = theme === 'dark' || (theme === 'system' && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  if (headless) return null
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      className="w-8 h-8 text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100"
+      title={`Theme: ${theme}`}
+    >
+      {isDark ? (
+        <Moon className="w-4 h-4" strokeWidth={1.5} />
+      ) : (
+        <Sun className="w-4 h-4" strokeWidth={1.5} />
+      )}
+    </Button>
+  )
+}

package/src/template/design/src/components/ui/ToastContext.tsx

@@ -0,0 +1,81 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { X, CheckCircle, Info, AlertTriangle } from 'lucide-react';
+
+type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+interface Toast {
+    id: string;
+    title: string;
+    description?: string;
+    type?: ToastType;
+}
+
+interface ToastContextType {
+    toast: (props: Omit<Toast, 'id'>) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+    const [toasts, setToasts] = useState<Toast[]>([]);
+
+    const toast = useCallback(({ title, description, type = 'info' }: Omit<Toast, 'id'>) => {
+        const id = Math.random().toString(36).substring(2, 9);
+        setToasts((prev) => [...prev, { id, title, description, type }]);
+
+        // Auto dismiss
+        setTimeout(() => {
+            removeToast(id);
+        }, 3000);
+    }, []);
+
+    const removeToast = useCallback((id: string) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+
+    return (
+        <ToastContext.Provider value={{ toast }}>
+            {children}
+            <div className="fixed bottom-4 right-4 z-[9999] flex flex-col gap-2">
+                {toasts.map((t) => (
+                    <div
+                        key={t.id}
+                        className={`
+              min-w-[300px] border rounded-lg shadow-lg p-4 transition-all duration-300 animate-in slide-in-from-right
+              bg-white dark:bg-stone-900 border-stone-200 dark:border-stone-800
+            `}
+                    >
+                        <div className="flex items-start gap-3">
+                            <div className="shrink-0 pt-0.5">
+                                {t.type === 'success' && <CheckCircle size={18} className="text-emerald-500" />}
+                                {t.type === 'error' && <AlertTriangle size={18} className="text-red-500" />}
+                                {t.type === 'warning' && <AlertTriangle size={18} className="text-amber-500" />}
+                                {t.type === 'info' && <Info size={18} className="text-blue-500" />}
+                            </div>
+                            <div className="flex-1">
+                                <h4 className="text-sm font-semibold text-stone-900 dark:text-stone-100">{t.title}</h4>
+                                {t.description && (
+                                    <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">{t.description}</p>
+                                )}
+                            </div>
+                            <button
+                                onClick={() => removeToast(t.id)}
+                                className="shrink-0 text-stone-400 hover:text-stone-600 dark:hover:text-stone-300"
+                            >
+                                <X size={16} />
+                            </button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+}

package/src/template/design/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }