@cloudvoyant/helical-svelte 0.19.0

package/dist/popover/PopoverTrigger.svelte.d.ts

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

package/dist/popover/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Popover } from './Popover.svelte';
+export { default as PopoverProvider } from './PopoverProvider.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverAnchor } from './PopoverAnchor.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';
+export { default as PopoverTitle } from './PopoverTitle.svelte';
+export { default as PopoverDescription } from './PopoverDescription.svelte';
+export { default as PopoverDismiss } from './PopoverDismiss.svelte';
+export { default as PopoverIndicator } from './PopoverIndicator.svelte';
+export { usePopover, usePopoverContext } from './PopoverContext.svelte';

package/dist/popover/index.js

@@ -0,0 +1,11 @@
+// libs/helical-svelte/src/popover/index.ts
+export { default as Popover } from './Popover.svelte';
+export { default as PopoverProvider } from './PopoverProvider.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverAnchor } from './PopoverAnchor.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';
+export { default as PopoverTitle } from './PopoverTitle.svelte';
+export { default as PopoverDescription } from './PopoverDescription.svelte';
+export { default as PopoverDismiss } from './PopoverDismiss.svelte';
+export { default as PopoverIndicator } from './PopoverIndicator.svelte';
+export { usePopover, usePopoverContext } from './PopoverContext.svelte';

package/dist/prose/Prose.svelte

@@ -0,0 +1,23 @@
+<!-- libs/helical-svelte/src/prose/Prose.svelte -->
+<!-- Closely based on: Shark UI prose, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { proseVariants, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = HTMLAttributes<HTMLElement> & {
+    element?: string;
+    size?: 'sm' | 'base' | 'lg';
+    class?: string;
+    children?: Snippet;
+  };
+
+  // Spread ...rest so id/data-*/aria-* and event handlers pass through, matching React's Prose.
+  let { element = 'div', size = 'base', class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(proseVariants({ size }), 'prose', className));
+</script>
+
+<svelte:element this={element} class={classes} {...rest}>
+  {#if children}{@render children()}{/if}
+</svelte:element>

package/dist/prose/Prose.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLElement> & {
+    element?: string;
+    size?: 'sm' | 'base' | 'lg';
+    class?: string;
+    children?: Snippet;
+};
+declare const Prose: import("svelte").Component<Props, {}, "">;
+type Prose = ReturnType<typeof Prose>;
+export default Prose;

package/dist/prose/index.d.ts

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

package/dist/prose/index.js

@@ -0,0 +1,2 @@
+// libs/helical-svelte/src/prose/index.ts
+export { default as Prose } from './Prose.svelte';

package/dist/questions/MultipleChoiceQuestion.svelte

@@ -0,0 +1,167 @@
+<!-- libs/helical-svelte/src/questions/MultipleChoiceQuestion.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import Checkbox from '../checkbox/Checkbox.svelte';
+  import CheckboxControl from '../checkbox/CheckboxControl.svelte';
+  import CheckboxIndicator from '../checkbox/CheckboxIndicator.svelte';
+  import CheckboxLabel from '../checkbox/CheckboxLabel.svelte';
+  import {
+    questionCardBase,
+    questionPromptBase,
+    questionGroupBase,
+    questionOptionBase,
+    questionOptionCorrectBase,
+    questionOptionIncorrectBase,
+    questionCheckButtonBase,
+    feedbackCorrectBase,
+    feedbackIncorrectBase,
+    feedbackExplanationBase,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  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<Set<number>>(new Set());
+  let result = $state<boolean | null>(null);
+
+  function computeCorrect() {
+    const correctSet = new Set(correct);
+    return selected.size === correctSet.size && [...selected].every((v) => correctSet.has(v));
+  }
+
+  const displayResult = $derived(quiz ? (submitted ? computeCorrect() : null) : result);
+
+  function toggleOption(index: number) {
+    if (quiz ? submitted : result !== null) return;
+    const next = new Set(selected);
+    if (next.has(index)) next.delete(index);
+    else next.add(index);
+    selected = next;
+    if (quiz) {
+      const has = selected.size > 0;
+      const isCorrect = has && computeCorrect();
+      onAnswerChange?.({ answered: has, correct: isCorrect });
+    }
+  }
+
+  function handleCheck() {
+    if (selected.size === 0) return;
+    const isCorrect = computeCorrect();
+    result = isCorrect;
+    onGraded?.(isCorrect);
+  }
+</script>
+
+<div class={cn(questionCardBase, className)} {...rest}>
+  <p class={questionPromptBase}>{prompt}</p>
+  <div role="group" class={questionGroupBase}>
+    {#each choices as choice, i (i)}
+      {@const isCorrectOption = correct.includes(i)}
+      <Checkbox
+        checked={selected.has(i)}
+        onCheckedChange={() => toggleOption(i)}
+        disabled={quiz ? submitted : result !== null}
+        class={cn(
+          questionOptionBase,
+          displayResult !== null && isCorrectOption && questionOptionCorrectBase,
+          displayResult !== null && selected.has(i) && !isCorrectOption && questionOptionIncorrectBase,
+        )}
+      >
+        <CheckboxControl>
+          <CheckboxIndicator>
+            <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"
+            >
+              <path d="M20 6 9 17l-5-5"></path>
+            </svg>
+          </CheckboxIndicator>
+        </CheckboxControl>
+        <CheckboxLabel>{choice}</CheckboxLabel>
+      </Checkbox>
+    {/each}
+  </div>
+  {#if !quiz && result === null}
+    <Ark as="button" type="button" onclick={handleCheck} disabled={selected.size === 0} 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/MultipleChoiceQuestion.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 MultipleChoiceQuestion: import("svelte").Component<Props, {}, "">;
+type MultipleChoiceQuestion = ReturnType<typeof MultipleChoiceQuestion>;
+export default MultipleChoiceQuestion;

package/dist/questions/NumericQuestion.svelte

@@ -0,0 +1,139 @@
+<!-- libs/helical-svelte/src/questions/NumericQuestion.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    questionCardBase,
+    questionPromptBase,
+    questionCheckButtonBase,
+    questionInputBase,
+    questionUnitBase,
+    feedbackCorrectBase,
+    feedbackIncorrectBase,
+    feedbackExplanationBase,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    id: string;
+    prompt: string;
+    answer: number;
+    tolerance?: number;
+    unit?: string;
+    explanation?: string;
+    quiz?: boolean;
+    submitted?: boolean;
+    onAnswerChange?: (state: { answered: boolean; correct: boolean }) => void;
+    onGraded?: (correct: boolean) => void;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    id,
+    prompt,
+    answer,
+    tolerance = 0,
+    unit,
+    explanation = undefined,
+    quiz = false,
+    submitted = false,
+    onAnswerChange,
+    onGraded,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let value = $state('');
+  let result = $state<boolean | null>(null);
+
+  const parsed = $derived(parseFloat(value));
+  const computeCorrect = $derived(!Number.isNaN(parsed) && Math.abs(parsed - answer) <= tolerance);
+  const displayResult = $derived(quiz ? (submitted ? computeCorrect : null) : result);
+
+  function handleCheck() {
+    if (Number.isNaN(parsed)) return;
+    const isCorrect = computeCorrect;
+    result = isCorrect;
+    onGraded?.(isCorrect);
+  }
+</script>
+
+<div class={cn(questionCardBase, className)} {...rest}>
+  <Ark as="label" for={`q-${id}-input`} class={questionPromptBase}>{prompt}</Ark>
+  <div class="flex items-center gap-2">
+    <input
+      id={`q-${id}-input`}
+      type="text"
+      inputmode="decimal"
+      {value}
+      oninput={(e) => {
+        if (quiz ? submitted : result !== null) return;
+        value = e.currentTarget.value;
+        if (quiz) {
+          const p = parseFloat(value);
+          const has = value.trim() !== '' && !Number.isNaN(p);
+          const isCorrect = has && Math.abs(p - answer) <= tolerance;
+          onAnswerChange?.({ answered: has, correct: isCorrect });
+        }
+      }}
+      disabled={quiz ? submitted : result !== null}
+      class={questionInputBase}
+    />
+    {#if unit}<Ark as="span" class={questionUnitBase}>{unit}</Ark>{/if}
+  </div>
+  {#if !quiz && result === null}
+    <Ark
+      as="button"
+      type="button"
+      onclick={handleCheck}
+      disabled={value.trim() === '' || Number.isNaN(parsed)}
+      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/NumericQuestion.svelte.d.ts

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

package/dist/questions/Quiz.svelte

@@ -0,0 +1,119 @@
+<!-- libs/helical-svelte/src/questions/Quiz.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helical-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/helical-ui';
+  import type { Question } from '@cloudvoyant/helical-ui';
+  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/helical-ui';
+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;