@cloudvoyant/helix-svelte 0.16.0 → 0.17.0

package/dist/questions/Quiz.svelte

@@ -0,0 +1,119 @@
+<!-- libs/helix-svelte/src/questions/Quiz.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import SingleChoiceQuestion from './SingleChoiceQuestion.svelte';
+  import MultipleChoiceQuestion from './MultipleChoiceQuestion.svelte';
+  import NumericQuestion from './NumericQuestion.svelte';
+  import {
+    quizRootBase,
+    quizHeaderBase,
+    quizTitleBase,
+    quizScoreBase,
+    quizResultBase,
+    quizResultTitleBase,
+    quizResultTextBase,
+    quizSubmitButtonBase,
+    quizResetButtonBase,
+    cn,
+  } from '@cloudvoyant/helix';
+  import type { Question } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    id: string;
+    title?: string;
+    questions: Question[];
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { id, title, questions, class: className = '', ...rest }: Props = $props();
+
+  let answers = $state<Record<string, { answered: boolean; correct: boolean }>>({});
+  let submitted = $state(false);
+  let resetKey = $state(0);
+
+  const total = $derived(questions.length);
+  const allAnswered = $derived(questions.length > 0 && questions.every((q) => answers[q.id]?.answered === true));
+  const score = $derived(questions.filter((q) => answers[q.id]?.correct === true).length);
+  const pct = $derived(total > 0 ? Math.round((score / total) * 100) : 0);
+
+  function handleAnswerChange(questionId: string) {
+    return (state: { answered: boolean; correct: boolean }) => {
+      answers = { ...answers, [questionId]: state };
+    };
+  }
+
+  function handleReset() {
+    answers = {};
+    submitted = false;
+    resetKey += 1;
+  }
+</script>
+
+<div data-quiz-id={id} class={cn(quizRootBase, className)} {...rest}>
+  <div class={quizHeaderBase}>
+    {#if title}<Ark as="h3" class={quizTitleBase}>{title}</Ark>{/if}
+  </div>
+  {#each questions as q (q.id)}
+    {#key `${q.id}-${resetKey}`}
+      {#if q.type === 'single'}
+        <SingleChoiceQuestion
+          id={q.id}
+          prompt={q.prompt}
+          choices={q.choices}
+          correct={q.correct}
+          explanation={q.explanation}
+          quiz
+          {submitted}
+          onAnswerChange={handleAnswerChange(q.id)}
+        />
+      {:else if q.type === 'multiple'}
+        <MultipleChoiceQuestion
+          id={q.id}
+          prompt={q.prompt}
+          choices={q.choices}
+          correct={q.correct}
+          explanation={q.explanation}
+          quiz
+          {submitted}
+          onAnswerChange={handleAnswerChange(q.id)}
+        />
+      {:else if q.type === 'numeric'}
+        <NumericQuestion
+          id={q.id}
+          prompt={q.prompt}
+          answer={q.answer}
+          tolerance={q.tolerance}
+          unit={q.unit}
+          explanation={q.explanation}
+          quiz
+          {submitted}
+          onAnswerChange={handleAnswerChange(q.id)}
+        />
+      {/if}
+    {/key}
+  {/each}
+  <div class="mt-4 flex items-center gap-3">
+    {#if !submitted}
+      <Ark as="button" type="button" onclick={() => (submitted = true)} disabled={!allAnswered} class={quizSubmitButtonBase}>
+        Submit
+      </Ark>
+    {:else}
+      <Ark as="button" type="button" onclick={handleReset} class={quizResetButtonBase}>
+        Reset
+      </Ark>
+    {/if}
+    <Ark as="span" role="status" class={quizScoreBase}>
+      {submitted ? `${score}/${total} (${pct}%)` : `${total} question${total === 1 ? '' : 's'}`}
+    </Ark>
+  </div>
+  {#if submitted}
+    <div class={quizResultBase}>
+      <div aria-live="polite" role="status" class="text-center">
+        <p class={quizResultTitleBase}>{score}/{total} ({pct}%)</p>
+        <p class={quizResultTextBase}>{pct >= 70 ? 'Well done!' : 'Keep studying and try again.'}</p>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/questions/Quiz.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Question } from '@cloudvoyant/helix';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    id: string;
+    title?: string;
+    questions: Question[];
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Quiz: import("svelte").Component<Props, {}, "">;
+type Quiz = ReturnType<typeof Quiz>;
+export default Quiz;

package/dist/questions/SingleChoiceQuestion.svelte

@@ -0,0 +1,141 @@
+<!-- libs/helix-svelte/src/questions/SingleChoiceQuestion.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import RadioGroup from '../radio-group/RadioGroup.svelte';
+  import RadioGroupItem from '../radio-group/RadioGroupItem.svelte';
+  import {
+    questionCardBase,
+    questionPromptBase,
+    questionGroupBase,
+    questionOptionBase,
+    questionOptionCorrectBase,
+    questionOptionIncorrectBase,
+    questionCheckButtonBase,
+    feedbackCorrectBase,
+    feedbackIncorrectBase,
+    feedbackExplanationBase,
+    cn,
+  } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    id: string;
+    prompt: string;
+    choices: string[];
+    correct: number;
+    explanation?: string;
+    quiz?: boolean;
+    submitted?: boolean;
+    onAnswerChange?: (state: { answered: boolean; correct: boolean }) => void;
+    onGraded?: (correct: boolean) => void;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    prompt,
+    choices,
+    correct,
+    explanation = undefined,
+    quiz = false,
+    submitted = false,
+    onAnswerChange,
+    onGraded,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let selected = $state<number | null>(null);
+  let result = $state<boolean | null>(null);
+
+  const displayResult = $derived(quiz ? (submitted ? selected === correct : null) : result);
+
+  function handleCheck() {
+    if (selected === null) return;
+    const isCorrect = selected === correct;
+    result = isCorrect;
+    onGraded?.(isCorrect);
+  }
+</script>
+
+<div class={cn(questionCardBase, className)} {...rest}>
+  <p class={questionPromptBase}>{prompt}</p>
+  <RadioGroup
+    orientation="vertical"
+    value={selected !== null ? String(selected) : null}
+    onValueChange={(details) => {
+      if (quiz ? submitted : result !== null) return;
+      selected = details.value != null ? Number(details.value) : null;
+      if (quiz) {
+        const has = selected !== null;
+        onAnswerChange?.({ answered: has, correct: has && selected === correct });
+      }
+    }}
+    disabled={quiz ? submitted : result !== null}
+    class={questionGroupBase}
+  >
+    {#each choices as choice, i (i)}
+      <RadioGroupItem
+        value={String(i)}
+        class={cn(
+          questionOptionBase,
+          displayResult !== null && i === correct && questionOptionCorrectBase,
+          displayResult !== null && i === selected && i !== correct && questionOptionIncorrectBase,
+        )}
+      >
+        {choice}
+      </RadioGroupItem>
+    {/each}
+  </RadioGroup>
+  {#if !quiz && result === null}
+    <Ark as="button" type="button" onclick={handleCheck} disabled={selected === null} class={questionCheckButtonBase}>
+      Check
+    </Ark>
+  {/if}
+  {#if displayResult !== null}
+    <div aria-live="polite" role="status" class="mt-3">
+      <div
+        class={cn(
+          'flex items-center gap-2 text-sm font-medium',
+          displayResult ? feedbackCorrectBase : feedbackIncorrectBase,
+        )}
+      >
+        {#if displayResult}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="size-4 shrink-0"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="m9 12 2 2 4-4"></path>
+          </svg>
+          <span>Correct</span>
+        {:else}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="size-4 shrink-0"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="m15 9-6 6"></path>
+            <path d="m9 9 6 6"></path>
+          </svg>
+          <span>Incorrect</span>
+        {/if}
+      </div>
+      {#if explanation}<p class={feedbackExplanationBase}>{explanation}</p>{/if}
+    </div>
+  {/if}
+</div>

package/dist/questions/SingleChoiceQuestion.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    id: string;
+    prompt: string;
+    choices: string[];
+    correct: number;
+    explanation?: string;
+    quiz?: boolean;
+    submitted?: boolean;
+    onAnswerChange?: (state: {
+        answered: boolean;
+        correct: boolean;
+    }) => void;
+    onGraded?: (correct: boolean) => void;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const SingleChoiceQuestion: import("svelte").Component<Props, {}, "">;
+type SingleChoiceQuestion = ReturnType<typeof SingleChoiceQuestion>;
+export default SingleChoiceQuestion;

package/dist/questions/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SingleChoiceQuestion } from './SingleChoiceQuestion.svelte';
+export { default as MultipleChoiceQuestion } from './MultipleChoiceQuestion.svelte';
+export { default as NumericQuestion } from './NumericQuestion.svelte';
+export { default as Quiz } from './Quiz.svelte';

package/dist/questions/index.js

@@ -0,0 +1,5 @@
+// libs/helix-svelte/src/questions/index.ts
+export { default as SingleChoiceQuestion } from './SingleChoiceQuestion.svelte';
+export { default as MultipleChoiceQuestion } from './MultipleChoiceQuestion.svelte';
+export { default as NumericQuestion } from './NumericQuestion.svelte';
+export { default as Quiz } from './Quiz.svelte';

package/dist/radio-group/RadioGroup.svelte

@@ -0,0 +1,16 @@
+<!-- libs/helix-svelte/src/radio-group/RadioGroup.svelte -->
+<!-- Closely based on: Shark UI radio group (@ark-ui/svelte/radio-group), mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { RadioGroupRoot, type RadioGroupRootProps } from '@ark-ui/svelte/radio-group';
+  import { radioGroupRootBase, cn } from '@cloudvoyant/helix';
+
+  type Props = RadioGroupRootProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(radioGroupRootBase, className));
+</script>
+
+<RadioGroupRoot class={classes} {...rest}>
+  {@render children?.()}
+</RadioGroupRoot>

package/dist/radio-group/RadioGroup.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type RadioGroupRootProps } from '@ark-ui/svelte/radio-group';
+type Props = RadioGroupRootProps & {
+    class?: string;
+};
+declare const RadioGroup: import("svelte").Component<Props, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/radio-group/RadioGroupItem.svelte

@@ -0,0 +1,26 @@
+<!-- libs/helix-svelte/src/radio-group/RadioGroupItem.svelte -->
+<!-- Closely based on: Shark UI radio group (@ark-ui/svelte/radio-group), mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import {
+    RadioGroupItem as ArkRadioGroupItem,
+    RadioGroupItemControl,
+    RadioGroupItemText,
+    RadioGroupItemHiddenInput,
+    type RadioGroupItemProps,
+  } from '@ark-ui/svelte/radio-group';
+  import { radioGroupItemControlBase, radioGroupItemTextBase, cn } from '@cloudvoyant/helix';
+
+  type Props = RadioGroupItemProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn('flex cursor-pointer items-center gap-2.5', className));
+</script>
+
+<ArkRadioGroupItem class={classes} {...rest}>
+  <RadioGroupItemControl class={radioGroupItemControlBase}>
+    <span class="size-1.5 rounded-full bg-current hidden [[data-state=checked]>&]:block"></span>
+  </RadioGroupItemControl>
+  <RadioGroupItemText class={radioGroupItemTextBase}>{@render children?.()}</RadioGroupItemText>
+  <RadioGroupItemHiddenInput />
+</ArkRadioGroupItem>

package/dist/radio-group/RadioGroupItem.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type RadioGroupItemProps } from '@ark-ui/svelte/radio-group';
+type Props = RadioGroupItemProps & {
+    class?: string;
+};
+declare const RadioGroupItem: import("svelte").Component<Props, {}, "">;
+type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
+export default RadioGroupItem;

package/dist/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RadioGroupItem } from './RadioGroupItem.svelte';

package/dist/radio-group/index.js

@@ -0,0 +1,3 @@
+// libs/helix-svelte/src/radio-group/index.ts
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RadioGroupItem } from './RadioGroupItem.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudvoyant/helix-svelte",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "helix Svelte UI components",
   "license": "MIT",
   "type": "module",
@@ -24,22 +24,31 @@
   },
   "peerDependencies": {
     "svelte": "^5.56.9",
-    "mermaid": "^11.16.0"
+    "mermaid": "^11.16.0",
+    "shiki": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "mermaid": {
       "optional": true
+    },
+    "shiki": {
+      "optional": true
     }
   },
   "dependencies": {
     "@ark-ui/svelte": "^5.23.1",
-    "@cloudvoyant/helix": "0.16.0"
+    "@tanstack/charts": "^0.16.0",
+    "@cloudvoyant/helix": "0.17.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/katex": "^0.16.8",
+    "katex": "^0.16.11",
+    "manim-web": "^0.3.24",
     "mermaid": "^11.16.0",
     "prettier-plugin-svelte": "^4.1.1",
+    "shiki": "^3.0.0",
     "svelte": "^5.56.9",
     "svelte-check": "^4.7.6",
     "typescript": "^5.5.0"