create-appraisejs 0.3.0-alpha.0 → 0.3.0-alpha.1

package/templates/starter/src/components/test-suite/test-suite-picker-helpers.ts

@@ -0,0 +1,76 @@
+import { getFilterTags } from '@/lib/tag-utils'
+import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
+
+export type DraftSelectionMap = Record<string, TestSuiteSelection>
+
+export function createDraftSelections(selectedSuites: TestSuiteSelection[]): DraftSelectionMap {
+  return selectedSuites.reduce<DraftSelectionMap>((acc, selection) => {
+    acc[selection.testSuiteId] = {
+      testSuiteId: selection.testSuiteId,
+      runAll: selection.runAll,
+      testCaseIds: selection.testCaseIds,
+    }
+    return acc
+  }, {})
+}
+
+export function normalizeSuiteSelection(
+  testSuite: TestSuitePickerRow,
+  selection: TestSuiteSelection,
+): TestSuiteSelection | null {
+  const childIds = testSuite.testCases.map(testCase => testCase.id)
+
+  if (childIds.length === 0) {
+    return null
+  }
+
+  if (selection.runAll) {
+    return {
+      testSuiteId: testSuite.id,
+      runAll: true,
+      testCaseIds: [],
+    }
+  }
+
+  const selectedChildIds = selection.testCaseIds.filter(testCaseId => childIds.includes(testCaseId))
+  if (selectedChildIds.length === 0) {
+    return null
+  }
+
+  if (selectedChildIds.length === childIds.length) {
+    return {
+      testSuiteId: testSuite.id,
+      runAll: true,
+      testCaseIds: [],
+    }
+  }
+
+  return {
+    testSuiteId: testSuite.id,
+    runAll: false,
+    testCaseIds: selectedChildIds,
+  }
+}
+
+export function suiteMatchesQuery(testSuite: TestSuitePickerRow, query: string): boolean {
+  if (!query) {
+    return true
+  }
+
+  const normalizedQuery = query.toLowerCase()
+  const searchableText = [
+    testSuite.name,
+    testSuite.description ?? '',
+    testSuite.module.name,
+    ...getFilterTags(testSuite.tags).map(tag => tag.name),
+    ...testSuite.testCases.flatMap(testCase => [
+      testCase.title,
+      testCase.description ?? '',
+      ...getFilterTags(testCase.tags).map(tag => tag.name),
+    ]),
+  ]
+    .join(' ')
+    .toLowerCase()
+
+  return searchableText.includes(normalizedQuery)
+}

package/templates/starter/src/components/test-suite/test-suite-picker.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import TestSuitePicker from './test-suite-picker'
+
+describe('TestSuitePicker', () => {
+  it('saves a partial suite selection', async () => {
+    const user = userEvent.setup()
+    const onSave = vi.fn()
+
+    render(
+      <TestSuitePicker
+        testSuites={[
+          {
+            id: 'suite-1',
+            name: 'Checkout',
+            description: 'Checkout flow',
+            module: { id: 'module-1', name: 'Payments' },
+            tags: [],
+            testCases: [
+              {
+                id: 'case-1',
+                title: 'Pay with card',
+                description: 'Card path',
+                steps: [],
+                tags: [],
+              },
+              {
+                id: 'case-2',
+                title: 'Pay with wallet',
+                description: 'Wallet path',
+                steps: [],
+                tags: [],
+              },
+            ],
+          } as never,
+        ]}
+        selectedSuites={[]}
+        onSave={onSave}
+        triggerPlaceholder="Select test suite(s)"
+        dialogTitle="Select Test Suites"
+        dialogDescription="Pick suites"
+        selectedLabel="Selected suites"
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /select test suite/i }))
+    await user.click(screen.getByRole('button', { name: /checkout/i }))
+    await user.click(screen.getByRole('checkbox', { name: 'Select test case Pay with card' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith([
+        {
+          testSuiteId: 'suite-1',
+          runAll: false,
+          testCaseIds: ['case-1'],
+        },
+      ])
+    })
+  })
+})

package/templates/starter/src/components/test-suite/test-suite-picker.tsx

@@ -0,0 +1,376 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+import { getFilterTags } from '@/lib/tag-utils'
+import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
+import { CheckedState } from '@radix-ui/react-checkbox'
+import { ChevronDown, ChevronRight, FolderTree, Search } from 'lucide-react'
+
+import { createDraftSelections, normalizeSuiteSelection, suiteMatchesQuery, type DraftSelectionMap } from './test-suite-picker-helpers'
+
+type TestSuitePickerProps = {
+  testSuites: TestSuitePickerRow[]
+  selectedSuites: TestSuiteSelection[]
+  onSave: (selectedSuites: TestSuiteSelection[]) => void
+  triggerPlaceholder: string
+  dialogTitle: string
+  dialogDescription: string
+  selectedLabel: string
+}
+
+export function TestSuitePicker({
+  testSuites,
+  selectedSuites,
+  onSave,
+  triggerPlaceholder,
+  dialogTitle,
+  dialogDescription,
+  selectedLabel,
+}: TestSuitePickerProps) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [draftSelections, setDraftSelections] = useState<DraftSelectionMap>(() => createDraftSelections(selectedSuites))
+  const [expandedSuites, setExpandedSuites] = useState<Record<string, boolean>>({})
+
+  const filteredSuites = useMemo(
+    () => testSuites.filter(testSuite => suiteMatchesQuery(testSuite, query.trim())),
+    [query, testSuites],
+  )
+
+  const totalSelectedSuites = Object.keys(draftSelections).length
+
+  const openDialog = () => {
+    setQuery('')
+    setDraftSelections(createDraftSelections(selectedSuites))
+    setExpandedSuites({})
+    setOpen(true)
+  }
+
+  const toggleExpanded = (testSuiteId: string) => {
+    setExpandedSuites(current => ({
+      ...current,
+      [testSuiteId]: !current[testSuiteId],
+    }))
+  }
+
+  const updateSuiteSelection = (testSuite: TestSuitePickerRow, checked: boolean) => {
+    setDraftSelections(current => {
+      const next = { ...current }
+
+      if (!checked) {
+        delete next[testSuite.id]
+        return next
+      }
+
+      next[testSuite.id] = {
+        testSuiteId: testSuite.id,
+        runAll: true,
+        testCaseIds: [],
+      }
+
+      return next
+    })
+  }
+
+  const updateChildSelection = (testSuite: TestSuitePickerRow, testCaseId: string, checked: boolean) => {
+    setDraftSelections(current => {
+      const childIds = testSuite.testCases.map(testCase => testCase.id)
+      const currentSelection = current[testSuite.id]
+      const nextSelectedIds = new Set(
+        currentSelection?.runAll ? childIds : currentSelection?.testCaseIds ?? [],
+      )
+
+      if (checked) {
+        nextSelectedIds.add(testCaseId)
+      } else {
+        nextSelectedIds.delete(testCaseId)
+      }
+
+      const next = { ...current }
+
+      if (nextSelectedIds.size === 0) {
+        delete next[testSuite.id]
+        return next
+      }
+
+      if (nextSelectedIds.size === childIds.length) {
+        next[testSuite.id] = {
+          testSuiteId: testSuite.id,
+          runAll: true,
+          testCaseIds: [],
+        }
+        return next
+      }
+
+      next[testSuite.id] = {
+        testSuiteId: testSuite.id,
+        runAll: false,
+        testCaseIds: Array.from(nextSelectedIds),
+      }
+
+      return next
+    })
+  }
+
+  const saveDraftSelection = () => {
+    const normalizedSelections = testSuites
+      .map(testSuite => {
+        const selection = draftSelections[testSuite.id]
+        return selection ? normalizeSuiteSelection(testSuite, selection) : null
+      })
+      .filter((selection): selection is TestSuiteSelection => Boolean(selection))
+
+    onSave(normalizedSelections)
+    setOpen(false)
+  }
+
+  const savedSuites = selectedSuites
+    .map(selection => {
+      const suite = testSuites.find(testSuite => testSuite.id === selection.testSuiteId)
+      if (!suite) {
+        return null
+      }
+
+      return {
+        suite,
+        selection: normalizeSuiteSelection(suite, selection),
+      }
+    })
+    .filter(
+      (entry): entry is { suite: TestSuitePickerRow; selection: TestSuiteSelection } =>
+        Boolean(entry?.suite && entry.selection),
+    )
+
+  const selectionSummaryLabel = selectedLabel.replace(/^selected\s+/i, '')
+  const shouldConstrainSavedListHeight = savedSuites.length > 2
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Button type="button" variant="outline" className="justify-between" onClick={openDialog}>
+        <span className={selectedSuites.length > 0 ? 'text-foreground' : 'text-muted-foreground'}>
+          {selectedSuites.length > 0
+            ? `${selectedSuites.length} ${selectionSummaryLabel.toLowerCase()} selected`
+            : triggerPlaceholder}
+        </span>
+        <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Browse</span>
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-h-[90vh] max-w-6xl gap-0 overflow-hidden p-0">
+          <DialogHeader className="border-b px-6 py-4">
+            <DialogTitle>{dialogTitle}</DialogTitle>
+            <DialogDescription>{dialogDescription}</DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col gap-4 px-6 py-4">
+            <div className="flex items-center gap-3">
+              <div className="relative flex-1">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={query}
+                  onChange={event => setQuery(event.target.value)}
+                  placeholder="Search suites, modules, tags, or child test cases..."
+                  className="pl-9"
+                />
+              </div>
+              <div className="text-sm text-muted-foreground">{totalSelectedSuites} suites selected</div>
+            </div>
+
+            <ScrollArea className="h-[480px] rounded-md border">
+              <div className="divide-y">
+                {filteredSuites.length > 0 ? (
+                  filteredSuites.map(testSuite => {
+                    const currentSelection = draftSelections[testSuite.id]
+                    const childIds = testSuite.testCases.map(testCase => testCase.id)
+                    const selectedChildIds = currentSelection?.runAll ? childIds : currentSelection?.testCaseIds ?? []
+                    const selectionCount = selectedChildIds.length
+                    const isExpanded = expandedSuites[testSuite.id] ?? false
+                    const suiteCheckedState: CheckedState =
+                      selectionCount === 0 ? false : selectionCount === childIds.length ? true : 'indeterminate'
+                    const suiteTags = getFilterTags(testSuite.tags)
+
+                    return (
+                      <div key={testSuite.id} className="bg-background">
+                        <div className="flex items-start gap-3 px-4 py-4">
+                          <Checkbox
+                            checked={suiteCheckedState}
+                            onCheckedChange={checked => updateSuiteSelection(testSuite, !!checked)}
+                            disabled={childIds.length === 0}
+                            aria-label={`Select suite ${testSuite.name}`}
+                            className="mt-1"
+                          />
+
+                          <div className="min-w-0 flex-1">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <button
+                                type="button"
+                                className="inline-flex items-center gap-2 text-left"
+                                onClick={() => toggleExpanded(testSuite.id)}
+                              >
+                                {isExpanded ? (
+                                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                                ) : (
+                                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                                )}
+                                <span className="font-semibold">{testSuite.name}</span>
+                              </button>
+                              <Badge variant="outline" className="gap-1">
+                                <FolderTree className="h-3.5 w-3.5" />
+                                {testSuite.module.name}
+                              </Badge>
+                              <Badge variant="secondary">{childIds.length} test cases</Badge>
+                              {selectionCount > 0 && (
+                                <Badge variant={currentSelection?.runAll ? 'default' : 'secondary'}>
+                                  {currentSelection?.runAll ? 'Full suite selected' : `${selectionCount} selected`}
+                                </Badge>
+                              )}
+                            </div>
+
+                            <p className="mt-2 text-sm text-muted-foreground">
+                              {testSuite.description?.trim() || 'No description provided.'}
+                            </p>
+
+                            <div className="mt-3 flex flex-wrap gap-2">
+                              {suiteTags.length > 0 ? (
+                                suiteTags.map(tag => (
+                                  <Badge key={tag.id} variant="outline">
+                                    {tag.name}
+                                  </Badge>
+                                ))
+                              ) : (
+                                <span className="text-xs text-muted-foreground">No filter tags</span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+
+                        {isExpanded && (
+                          <div className="border-t bg-muted/20 px-4 py-3">
+                            {testSuite.testCases.length > 0 ? (
+                              <div className="space-y-2">
+                                {testSuite.testCases.map(testCase => {
+                                  const testCaseTags = getFilterTags(testCase.tags)
+                                  const checked =
+                                    currentSelection?.runAll || currentSelection?.testCaseIds.includes(testCase.id) || false
+
+                                  return (
+                                    <label
+                                      key={testCase.id}
+                                      className={cn(
+                                        'flex items-start gap-3 rounded-md border bg-background px-3 py-3',
+                                        checked && 'border-primary/40',
+                                      )}
+                                    >
+                                      <Checkbox
+                                        checked={checked}
+                                        onCheckedChange={value => updateChildSelection(testSuite, testCase.id, !!value)}
+                                        aria-label={`Select test case ${testCase.title}`}
+                                        className="mt-1"
+                                      />
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex flex-wrap items-center gap-2">
+                                          <span className="text-sm font-medium">{testCase.title}</span>
+                                          <Badge variant="secondary">{testCase.steps.length} steps</Badge>
+                                        </div>
+                                        <p className="mt-1 text-xs text-muted-foreground">
+                                          {testCase.description?.trim() || 'No description provided.'}
+                                        </p>
+                                        <div className="mt-2 flex flex-wrap gap-2">
+                                          {testCaseTags.length > 0 ? (
+                                            testCaseTags.map(tag => (
+                                              <Badge key={tag.id} variant="outline">
+                                                {tag.name}
+                                              </Badge>
+                                            ))
+                                          ) : (
+                                            <span className="text-xs text-muted-foreground">No filter tags</span>
+                                          )}
+                                        </div>
+                                      </div>
+                                    </label>
+                                  )
+                                })}
+                              </div>
+                            ) : (
+                              <div className="rounded-md border border-dashed bg-background px-4 py-6 text-sm text-muted-foreground">
+                                This suite has no test cases yet and cannot be selected.
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })
+                ) : (
+                  <div className="px-4 py-10 text-center text-sm text-muted-foreground">No test suites found.</div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+
+          <DialogFooter className="border-t px-6 py-4">
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="button" onClick={saveDraftSelection}>
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {savedSuites.length > 0 && (
+        <div className="rounded-md border bg-muted/20">
+          <div className="border-b px-4 py-3 text-sm font-medium">{selectedLabel}</div>
+          <ScrollArea className={cn(shouldConstrainSavedListHeight && 'h-72')}>
+            <div className="space-y-3 p-4">
+              {savedSuites.map(({ suite, selection }) => {
+                const selectedChildren = selection.runAll
+                  ? suite.testCases
+                  : suite.testCases.filter(testCase => selection.testCaseIds.includes(testCase.id))
+
+                return (
+                  <div key={suite.id} className="rounded-md border bg-background p-3">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-sm font-semibold">{suite.name}</span>
+                      <Badge variant="outline">{suite.module.name}</Badge>
+                      <Badge variant={selection.runAll ? 'default' : 'secondary'}>
+                        {selection.runAll ? 'Full suite selected' : `${selectedChildren.length} test cases selected`}
+                      </Badge>
+                    </div>
+                    {!selection.runAll && selectedChildren.length > 0 && (
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {selectedChildren.map(testCase => (
+                          <Badge key={testCase.id} variant="outline">
+                            {testCase.title}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </ScrollArea>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TestSuitePicker

package/templates/starter/src/components/theme/theme-provider.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="dark" forcedTheme="dark" enableSystem={false} disableTransitionOnChange>
+      {children}
+    </NextThemesProvider>
+  )
+}

package/templates/starter/src/components/typography/page-header-subtitle.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const HeaderSubtitle = ({ children }: { children: React.ReactNode }) => {
+  return <div className="text-sm font-medium text-muted-foreground">{children}</div>
+}
+
+export default HeaderSubtitle

package/templates/starter/src/components/typography/page-header.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+const PageHeader = ({ className, children }: { className?: string; children: React.ReactNode }) => {
+  return <div className={cn('text-4xl font-bold text-primary', className)}>{children}</div>
+}
+
+export default PageHeader

package/templates/starter/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}