62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:Tc5d1,'use client' import * as React from 'react' import { AlertCircle, Check, CheckCircle2, ChevronLeft, ChevronRight, Clock, FileCode, Flag, Lightbulb, LogOut, RotateCcw, XCircle, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog' import { Progress } from '@/components/ui/progress' import { Separator } from '@/components/ui/separator' export interface QuizOption { id: string text: string } export interface QuizQuestion { id: number category: string prompt: string codeSnippet?: string codeLanguage?: string options: QuizOption[] correctOptionId: string explanation: string } export interface QuizAssessmentRunnerProps { initialQuestion?: number initialTimeRemaining?: number initialAnswers?: Record initialFlagged?: number[] initialSubmitted?: boolean className?: string } const defaultQuestions: QuizQuestion[] = [ { id: 1, category: 'Architecture', prompt: 'What is the primary architectural difference between a UI Primitive and a UI Block in the UIPKGE component registry?', codeSnippet: `// Primitive (registry:ui) vs Block (registry:block)\nconst Primitive = \nconst Block = `, codeLanguage: 'TypeScript', options: [ { id: 'A', text: 'Primitives are pre-compiled npm packages, while Blocks are static JSON schema files.', }, { id: 'B', text: 'Primitives encapsulate low-level mechanics and styling tokens, while Blocks compose primitives into transparent, copy-pastable domain layouts.', }, { id: 'C', text: 'Primitives can only be rendered server-side, while Blocks require client-side WebSockets.', }, { id: 'D', text: 'Primitives require Zod runtime validation schemas, while Blocks only support TypeScript interfaces.', }, ], correctOptionId: 'B', explanation: 'In the UIPKGE architecture, primitives (registry:ui) encapsulate accessibility, focus states, and styling tokens, whereas blocks (registry:block) compose those primitives raw into unabstracted layouts where developers own and customize the code.', }, { id: 2, category: 'Vue 3.5 SSR', prompt: 'Why must CVA (Class Variance Authority) variant functions in Vue registry components be placed in a dedicated `.variants.ts` file rather than `index.ts`?', codeSnippet: `// button.variants.ts\nexport const buttonVariants = cva(...)\n\n// Button.vue\nimport { buttonVariants } from './button.variants'\n\n// index.ts\nexport { default as Button } from './Button.vue'\nexport { buttonVariants } from './button.variants'`, codeLanguage: 'TypeScript', options: [ { id: 'A', text: 'To comply with ECMAScript dynamic tree-shaking requirements for bundlers.', }, { id: 'B', text: 'To prevent Vue SSR circular module dependency deadlocks where $setup.xxxVariants is undefined at runtime.', }, { id: 'C', text: 'Because TypeScript forbids exporting types and constants from the same index file.', }, { id: 'D', text: 'To enable hot-module replacement specifically for PostCSS variable transformations.', }, ], correctOptionId: 'B', explanation: 'Circular imports between Component.vue and index.ts cause runtime evaluation failures during SSR/SSG pre-rendering, resulting in "$setup.xxxVariants is not a function" errors.', }, { id: 3, category: 'Design Tokens', prompt: "Which Tailwind CSS v4 directive establishes the OKLCH design token mapping in UIPKGE's theme layer?", codeSnippet: `@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-primary: var(--primary);\n --color-card: var(--card);\n}`, codeLanguage: 'CSS', options: [ { id: 'A', text: '@apply tokens.oklch;', }, { id: 'B', text: '@theme inline', }, { id: 'C', text: "@config 'tailwind.theme.ts';", }, { id: 'D', text: '@utility theme-variables;', }, ], correctOptionId: 'B', explanation: 'Tailwind CSS v4 uses `@theme inline` blocks to bind OKLCH CSS variables directly to Tailwind utility classes without needing a separate tailwind.config.js file.', }, { id: 4, category: 'Reka UI / Vue', prompt: 'When authoring polymorphic components in Vue 3.5 with Reka UI, which pattern cleanly strips the class prop for `cn()` forwarding?', codeSnippet: `const props = defineProps()\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwarded = useForwardProps(delegatedProps)`, codeLanguage: 'TypeScript', options: [ { id: 'A', text: "Directly passing v-bind='props' to the template without stripping the class prop.", }, { id: 'B', text: "Using reactiveOmit(props, 'class') combined with useForwardProps and explicit :class='cn(...)'.", }, { id: 'C', text: 'Using Object.assign({}, props) inside an onMounted lifecycle hook.', }, { id: 'D', text: "Using v-bind='$attrs' with inheritAttrs: true set on the SFC.", }, ], correctOptionId: 'B', explanation: 'reactiveOmit from @vueuse/core strips the class attribute while retaining reactivity, allowing custom class names to merge via cn() on the root element.', }, { id: 5, category: 'Design Craft', prompt: 'Why is the sub-12px micro-text rule (avoiding `text-xs`, `text-xs`) strictly enforced in UIPKGE craft standards?', codeSnippet: `// ❌ Anti-pattern:\nStatus\n\n// ✅ Standard-compliant:\nStatus`, codeLanguage: 'HTML', options: [ { id: 'A', text: 'Sub-12px text triggers subpixel antialiasing rendering bugs on macOS WebKit.', }, { id: 'B', text: 'Arbitrary micro-text degrades legibility, violates WCAG AA contrast guidelines, and fragments typographic scale discipline.', }, { id: 'C', text: 'Tailwind CSS v4 ignores arbitrary bracket pixel values in production builds.', }, { id: 'D', text: 'Screen readers automatically skip DOM elements rendered smaller than 12px.', }, ], correctOptionId: 'B', explanation: 'UIPKGE design craft mandates semantic typography starting at text-xs (12px) for badges and metadata to maintain readability and systematic hierarchy across devices.', }, { id: 6, category: 'React Architecture', prompt: 'In the React registry mirror, what headless primitive pattern allows consumers to pass custom trigger elements via `asChild`?', codeSnippet: `const Button = React.forwardRef(\n ({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n return \n }\n)`, codeLanguage: 'TSX', options: [ { id: 'A', text: 'Radix UI Slot primitive forwarded with asChild boolean prop.', }, { id: 'B', text: 'React cloneElement with recursive prop decoration.', }, { id: 'C', text: 'Custom Shadow DOM web component injection.', }, { id: 'D', text: 'Direct DOM mutation through React portal boundaries.', }, ], correctOptionId: 'A', explanation: 'The Radix UI Slot primitive merges props and event listeners directly onto its immediate child, enabling seamless element composition without wrapper DIVs.', }, { id: 7, category: 'Typography / UX', prompt: 'Which CSS font utility prevents numerical values like timers, counters, and metrics from causing horizontal layout shift during updates?', codeSnippet: `

\n 18:42 remaining\n

`, codeLanguage: 'HTML', options: [ { id: 'A', text: 'tabular-nums (font-variant-numeric: tabular-nums)', }, { id: 'B', text: 'font-stretch-condensed', }, { id: 'C', text: 'tracking-tightest', }, { id: 'D', text: 'text-balance', }, ], correctOptionId: 'A', explanation: 'tabular-nums enforces uniform width for numerical glyphs (0-9), preventing visual jitter when numbers change in timers and live feeds.', }, { id: 8, category: 'Registry Conventions', prompt: 'What is the core rule regarding data arrays and tile layout abstractions when authoring UIPKGE blocks?', codeSnippet: `// ✅ Allowed in blocks:\n

\n Total Revenue...\n Active Users...\n

`, codeLanguage: 'TSX', options: [ { id: 'A', text: 'Always abstract card lists into a generic primitive.', }, { id: 'B', text: 'Blocks must compose primitives raw and top-to-bottom so developers can inspect and edit layout structure directly.', }, { id: 'C', text: 'Never render more than two cards per block layout.', }, { id: 'D', text: 'All block components must persist their state to IndexedDB storage.', }, ], correctOptionId: 'B', explanation: 'UIPKGE explicitly bans monolithic StatCard-shaped primitives. Blocks must expose raw primitive composition inline so users have full ownership of the rendered markup.', }, { id: 9, category: 'Accessibility (a11y)', prompt: 'Which focus ring class pattern guarantees high-contrast keyboard accessibility without creating persistent outlines on mouse clicks?', codeSnippet: `class="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"`, codeLanguage: 'HTML', options: [ { id: 'A', text: 'focus:outline-none with no replacement outline or ring.', }, { id: 'B', text: 'focus-visible:ring-2 focus-visible:ring-ring with visible focus ring tokens.', }, { id: 'C', text: 'active:scale-95 on all interactive mouse events.', }, { id: 'D', text: 'hover:border-destructive on standard form input elements.', }, ], correctOptionId: 'B', explanation: 'focus-visible only applies the focus ring when keyboard navigation is detected, preserving clean aesthetics on mouse clicks while strictly satisfying WCAG 2.1 criteria.', }, { id: 10, category: 'Registry Distribution', prompt: 'What is the purpose of the `registryDependencies` array in `.registry.ts` item manifests?', codeSnippet: `export default defineRegistryItem({\n name: 'quiz-assessment-runner',\n type: 'registry:block',\n registryDependencies: [\n 'https://uipkge.dev/r/badge.json',\n 'https://uipkge.dev/r/button.json',\n 'https://uipkge.dev/r/card.json',\n ],\n})`, codeLanguage: 'TypeScript', options: [ { id: 'A', text: 'It publishes private registry tarballs directly to npmjs.com.', }, { id: 'B', text: 'It instructs shadcn / shadcn-vue CLIs to transitively resolve and copy required UI primitives into the consumer project.', }, { id: 'C', text: 'It configures Webpack chunk splitting for client-side routing.', }, { id: 'D', text: 'It generates backend database migration tables automatically.', }, ], correctOptionId: 'B', explanation: 'registryDependencies allows shadcn and shadcn-vue CLI tools to resolve and download all required component dependencies when installing a block.', }, ] export function QuizAssessmentRunner({ initialQuestion = 1, initialTimeRemaining = 1122, initialAnswers = {}, initialFlagged = [], initialSubmitted = false, className, }: QuizAssessmentRunnerProps) { const totalQuestions = defaultQuestions.length const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState( Math.max(0, Math.min(initialQuestion - 1, totalQuestions - 1)), ) const [answers, setAnswers] = React.useState>(initialAnswers) const [flagged, setFlagged] = React.useState>(new Set(initialFlagged)) const [timeRemaining, setTimeRemaining] = React.useState(initialTimeRemaining) const [isSubmitted, setIsSubmitted] = React.useState(initialSubmitted) const [isSubmitDialogOpen, setIsSubmitDialogOpen] = React.useState(false) const [isExitDialogOpen, setIsExitDialogOpen] = React.useState(false) const [reviewFilter, setReviewFilter] = React.useState<'all' | 'correct' | 'incorrect' | 'flagged'>('all') React.useEffect(() => { if (isSubmitted) return const interval = setInterval(() => { setTimeRemaining((prev) => { if (prev <= 1) { clearInterval(interval) setIsSubmitted(true) setIsSubmitDialogOpen(false) return 0 } return prev - 1 }) }, 1000) return () => clearInterval(interval) }, [isSubmitted]) const currentQuestion = defaultQuestions[currentQuestionIndex] const answeredCount = Object.keys(answers).length const flaggedCount = flagged.size const unansweredCount = totalQuestions - answeredCount const progressPercentage = Math.round((answeredCount / totalQuestions) * 100) const correctCount = React.useMemo(() => { return defaultQuestions.filter((q) => answers[q.id] === q.correctOptionId).length }, [answers]) const incorrectCount = React.useMemo(() => { return defaultQuestions.filter((q) => answers[q.id] && answers[q.id] !== q.correctOptionId).length }, [answers]) const scorePercentage = Math.round((correctCount / totalQuestions) * 100) const isPassed = scorePercentage >= 80 const gradeLabel = React.useMemo(() => { if (scorePercentage >= 90) return 'Grade A (Mastery)' if (scorePercentage >= 80) return 'Grade B (Proficient)' if (scorePercentage >= 70) return 'Grade C (Needs Review)' return 'Grade F (Did Not Pass)' }, [scorePercentage]) const formattedTime = React.useMemo(() => { const mins = Math.floor(Math.max(0, timeRemaining) / 60) const secs = Math.max(0, timeRemaining) % 60 return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}` }, [timeRemaining]) const timeSpentFormatted = React.useMemo(() => { const spent = Math.max(0, initialTimeRemaining - timeRemaining) const mins = Math.floor(spent / 60) const secs = spent % 60 return `${mins}m ${String(secs).padStart(2, '0')}s` }, [initialTimeRemaining, timeRemaining]) const filteredReviewQuestions = React.useMemo(() => { if (reviewFilter === 'correct') { return defaultQuestions.filter((q) => answers[q.id] === q.correctOptionId) } if (reviewFilter === 'incorrect') { return defaultQuestions.filter((q) => answers[q.id] !== q.correctOptionId) } if (reviewFilter === 'flagged') { return defaultQuestions.filter((q) => flagged.has(q.id)) } return defaultQuestions }, [reviewFilter, answers, flagged]) const toggleFlag = (questionId: number) => { setFlagged((prev) => { const next = new Set(prev) if (next.has(questionId)) { next.delete(questionId) } else { next.add(questionId) } return next }) } const selectOption = (optionId: string) => { setAnswers((prev) => ({ ...prev, [currentQuestion.id]: optionId, })) } const goToQuestion = (index: number) => { setCurrentQuestionIndex(Math.max(0, Math.min(index, totalQuestions - 1))) } const prevQuestion = () => { if (currentQuestionIndex > 0) { setCurrentQuestionIndex((prev) => prev - 1) } } const nextQuestion = () => { if (currentQuestionIndex < totalQuestions - 1) { setCurrentQuestionIndex((prev) => prev + 1) } else { setIsSubmitDialogOpen(true) } } const submitExam = () => { setIsSubmitted(true) setIsSubmitDialogOpen(false) } const retakeQuiz = () => { setAnswers({}) setFlagged(new Set()) setTimeRemaining(initialTimeRemaining) setCurrentQuestionIndex(0) setIsSubmitted(false) setReviewFilter('all') } const confirmExit = () => { setIsExitDialogOpen(false) retakeQuiz() } return (

{/* ================================================================= */} {/* VIEW 1: ACTIVE QUIZ EXAM RUNNER */} {/* ================================================================= */} {!isSubmitted ? ( <> {/* Quiz Top Bar / Header */}

Certification Assessment Exam #TS-804

TypeScript & Component Architecture Certification Quiz

{/* Timer Pill */}

{formattedTime} remaining

{/* Question Counter Pill */} Question {currentQuestionIndex + 1} of {totalQuestions} {/* Exit Button */}

{/* 2-Column Quiz Canvas */}

{/* Left: Question & Options Card */}

{currentQuestion.category} Question {currentQuestionIndex + 1} of {totalQuestions}

{/* Flag for Review Toggle Button */}

{/* Question Prompt Text */} {currentQuestion.prompt} {/* Code Snippet Box (if available) */} {currentQuestion.codeSnippet && (

{currentQuestion.codeLanguage || 'TypeScript'}

Context

                        {currentQuestion.codeSnippet}

)} {/* 4 Radio Option Cards */}

Select the correct answer:

{currentQuestion.options.map((opt) => { const isSelected = answers[currentQuestion.id] === opt.id return (

selectOption(opt.id)} onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault() selectOption(opt.id) } }} > {/* Letter Circle Badge (A, B, C, D) */}

{opt.id}

{/* Option Text */}

{opt.text}

{/* Selected Check Icon */} {isSelected && (

)}

) })}

{currentQuestionIndex === totalQuestions - 1 ? ( ) : ( )}

{/* Right: Question Navigation Sidebar */}

Question Navigator {answeredCount}/{totalQuestions} done

Jump directly to any question or review status. {/* Progress Bar */}

Exam Progress {progressPercentage}% Complete

{/* 10 Question Number Grid */}

Questions

{defaultQuestions.map((q, idx) => { const isCurrent = idx === currentQuestionIndex const isAnswered = Boolean(answers[q.id]) const isFlag = flagged.has(q.id) return ( ) })}

{/* Legend */}

Status Legend

Answered ({answeredCount})

Flagged ({flaggedCount})

Current

Unanswered ({unansweredCount})

{/* Submit Button */}

) : ( /* ================================================================= */ /* VIEW 2: QUIZ RESULTS SUMMARY SCREEN */ /* ================================================================= */

{/* Results Hero Score Card */}

{isPassed ? 'PASSED · CERTIFIED' : 'DID NOT PASS · RETAKE RECOMMENDED'} Exam Code #TS-804

{scorePercentage}% Score · {gradeLabel}

{isPassed ? 'Congratulations! You have satisfied the technical competency standards for TypeScript and UIPKGE Component Architecture.' : 'You scored below the 80% certification threshold. Review the explanations below and retake the assessment when ready.'}

{/* 4 KPI Summary Cards */}

Total Score

{correctCount} / {totalQuestions}

{scorePercentage}% accuracy

Result Status

{isPassed ? 'Passed' : 'Failed'}

Passing threshold: 80%

Time Elapsed

{timeSpentFormatted}

18m 42s allocated

Flagged Questions

{flaggedCount}

Reviewed items

{/* Question Review Section */}

Answer Review & Explanations Detailed technical breakdown for every question in the assessment.

{/* Filter Buttons */}

{filteredReviewQuestions.map((q) => { const isCorrect = answers[q.id] === q.correctOptionId const isFlag = flagged.has(q.id) return (

{/* Question Header */}

Question {q.id} {q.category} {isFlag && ( Flagged )}

{isCorrect ? : } {isCorrect ? 'Correct (+10 pts)' : answers[q.id] ? 'Incorrect (0 pts)' : 'Unanswered (0 pts)'}

{/* Question Prompt */}

{q.prompt}

{/* Optional Context Snippet */} {q.codeSnippet && (

                          {q.codeSnippet}

)} {/* Answer Comparison Cards */}

{/* User's Answer */}

Your Response:

{answers[q.id] ? ( <> Option {answers[q.id]}: {q.options.find((o) => o.id === answers[q.id])?.text} ) : ( 'No answer submitted' )}

{/* Correct Answer */}

Correct Answer:

Option {q.correctOptionId}: {q.options.find((o) => o.id === q.correctOptionId)?.text}

{/* Technical Explanation Box */}

Architectural Explanation:

{q.explanation}

) })} Exam ID: 804-FE-UIPKGE

)} {/* ================================================================= */} {/* DIALOG: CONFIRM EXAM SUBMISSION */} {/* ================================================================= */} {/* ================================================================= */} {/* DIALOG: CONFIRM EXIT */} {/* ================================================================= */}

) } export default QuizAssessmentRunner 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/dialog.json","https://uipkge.dev/r/react/progress.json","https://uipkge.dev/r/react/separator.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/quiz-assessment-runner/QuizAssessmentRunner.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/QuizAssessmentRunner.tsx"}],"className":"h-[70svh] min-h-80"}]]}]