@cloudvoyant/helix-svelte 0.16.0 → 0.17.0

package/dist/code-block/LanguageTabsCodeBlock.svelte

@@ -0,0 +1,119 @@
+<!-- libs/helix-svelte/src/code-block/LanguageTabsCodeBlock.svelte -->
+<!-- Closely based on: diffbook code-block family, rebuilt with a helix Select language dropdown
+     + floating copy, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CopyButton from '../CopyButton.svelte';
+  import {
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectIndicator,
+    SelectContent,
+    SelectItem,
+    SelectItemText,
+    SelectItemIndicator,
+  } from '../select';
+  import CodeBlockHeader from './CodeBlockHeader.svelte';
+  import CodeBlockTitle from './CodeBlockTitle.svelte';
+  import CodeRenderer from './CodeRenderer.svelte';
+  import {
+    codeBlockRootBase,
+    codeBlockCopyFloatBase,
+    cn,
+  } from '@cloudvoyant/helix';
+  import type { LanguageTab } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    tabs: LanguageTab[];
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    tabs,
+    showLineNumbers = false,
+    scrollable = false,
+    maxHeight = 400,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let active = $state(tabs[0]?.label ?? '');
+  const tab = $derived(tabs.find((t) => t.label === active) ?? tabs[0]);
+  const items = $derived(tabs.map((t) => ({ value: t.label, label: t.label })));
+
+  $effect(() => {
+    if (!tabs.some((t) => t.label === active)) {
+      active = tabs[0]?.label ?? '';
+    }
+  });
+
+  const classes = $derived(cn(codeBlockRootBase, className));
+</script>
+
+<Ark as="div" data-code-block class={classes} {...rest}>
+  <CodeBlockHeader>
+    <CodeBlockTitle>{tab?.filename}</CodeBlockTitle>
+    <div class="ml-auto">
+      <Select {items} value={[active]} onValueChange={(details) => (active = details.value[0])} aria-label="Language">
+        <SelectTrigger size="sm" class="min-w-28 justify-between font-mono text-xs">
+          <SelectValue />
+          <SelectIndicator>
+            <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="m6 9 6 6 6-6"></path>
+            </svg>
+          </SelectIndicator>
+        </SelectTrigger>
+        <SelectContent>
+          {#each tabs as t (t.label)}
+            <SelectItem item={{ value: t.label, label: t.label }}>
+              <SelectItemText>{t.label}</SelectItemText>
+              <SelectItemIndicator>
+                <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>
+              </SelectItemIndicator>
+            </SelectItem>
+          {/each}
+        </SelectContent>
+      </Select>
+    </div>
+  </CodeBlockHeader>
+  {#if tab}
+    <div class="relative">
+      <CodeRenderer
+        code={tab.code}
+        language={tab.language ?? 'tsx'}
+        html={tab.html}
+        {showLineNumbers}
+        {scrollable}
+        {maxHeight}
+      />
+      <div class={codeBlockCopyFloatBase}>
+        <CopyButton value={tab.code} label="Copy code" />
+      </div>
+    </div>
+  {/if}
+</Ark>

package/dist/code-block/LanguageTabsCodeBlock.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { LanguageTab } from '@cloudvoyant/helix';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    tabs: LanguageTab[];
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const LanguageTabsCodeBlock: import("svelte").Component<Props, {}, "">;
+type LanguageTabsCodeBlock = ReturnType<typeof LanguageTabsCodeBlock>;
+export default LanguageTabsCodeBlock;

package/dist/code-block/MultiFileCodeBlock.svelte

@@ -0,0 +1,75 @@
+<!-- libs/helix-svelte/src/code-block/MultiFileCodeBlock.svelte -->
+<!-- Closely based on: diffbook code-block family, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CopyButton from '../CopyButton.svelte';
+  import CodeRenderer from './CodeRenderer.svelte';
+  import { codeBlockRootBase, cn } from '@cloudvoyant/helix';
+  import type { FileEntry } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    files: FileEntry[];
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    files,
+    showLineNumbers = false,
+    scrollable = false,
+    maxHeight = 400,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let active = $state(files[0]?.filename ?? '');
+  const file = $derived(files.find((f) => f.filename === active) ?? files[0]);
+
+  $effect(() => {
+    if (!files.some((f) => f.filename === active)) {
+      active = files[0]?.filename ?? '';
+    }
+  });
+
+  const classes = $derived(cn(codeBlockRootBase, className));
+</script>
+
+<Ark as="div" data-code-block class={classes} {...rest}>
+  <div class="flex items-center justify-between border-b bg-muted/50">
+    <div role="tablist" aria-label="Files" class="flex overflow-x-auto no-scrollbar pl-1">
+      {#each files as f (f.filename)}
+        <button
+          role="tab"
+          aria-selected={active === f.filename}
+          onclick={() => (active = f.filename)}
+          class={cn(
+            'h-10 shrink-0 border-b-2 px-3 font-mono text-xs transition-colors',
+            active === f.filename
+              ? 'border-foreground text-foreground'
+              : 'border-transparent text-muted-foreground hover:text-foreground',
+          )}
+        >
+          {f.filename}
+        </button>
+      {/each}
+    </div>
+    {#if file}
+      <div class="shrink-0 pr-3">
+        <CopyButton value={file.code} label="Copy code" />
+      </div>
+    {/if}
+  </div>
+  {#if file}
+    <CodeRenderer
+      code={file.code}
+      language={file.language ?? 'tsx'}
+      html={file.html}
+      {showLineNumbers}
+      {scrollable}
+      {maxHeight}
+    />
+  {/if}
+</Ark>

package/dist/code-block/MultiFileCodeBlock.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { FileEntry } from '@cloudvoyant/helix';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    files: FileEntry[];
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const MultiFileCodeBlock: import("svelte").Component<Props, {}, "">;
+type MultiFileCodeBlock = ReturnType<typeof MultiFileCodeBlock>;
+export default MultiFileCodeBlock;

package/dist/code-block/index.d.ts

@@ -0,0 +1,7 @@
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as CodeBlockHeader } from './CodeBlockHeader.svelte';
+export { default as CodeBlockTitle } from './CodeBlockTitle.svelte';
+export { default as CodeBlockContent } from './CodeBlockContent.svelte';
+export { default as CodeBlockCopyButton } from './CodeBlockCopyButton.svelte';
+export { default as MultiFileCodeBlock } from './MultiFileCodeBlock.svelte';
+export { default as LanguageTabsCodeBlock } from './LanguageTabsCodeBlock.svelte';

package/dist/code-block/index.js

@@ -0,0 +1,8 @@
+// libs/helix-svelte/src/code-block/index.ts
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as CodeBlockHeader } from './CodeBlockHeader.svelte';
+export { default as CodeBlockTitle } from './CodeBlockTitle.svelte';
+export { default as CodeBlockContent } from './CodeBlockContent.svelte';
+export { default as CodeBlockCopyButton } from './CodeBlockCopyButton.svelte';
+export { default as MultiFileCodeBlock } from './MultiFileCodeBlock.svelte';
+export { default as LanguageTabsCodeBlock } from './LanguageTabsCodeBlock.svelte';

package/dist/index.d.ts

@@ -40,3 +40,18 @@ export * from './select';
 export * from './combobox';
 export * from './tags-input';
 export { default as Mermaid } from './Mermaid.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export * from './radio-group';
+export { default as Notice } from './Notice.svelte';
+export { default as Figure } from './Figure.svelte';
+export { default as Reveal } from './Reveal.svelte';
+export { default as PrevNext } from './PrevNext.svelte';
+export { default as LaTeX } from './LaTeX.svelte';
+export { default as InlineLaTeX } from './InlineLaTeX.svelte';
+export * from './code-block';
+export { default as YouTube } from './YouTube.svelte';
+export { default as YoutubeTimestamps } from './YoutubeTimestamps.svelte';
+export { default as YoutubeTimestampAt } from './YoutubeTimestampAt.svelte';
+export { default as Chart } from './Chart.svelte';
+export { default as Manim } from './Manim.svelte';
+export * from './questions';

package/dist/index.js

@@ -41,3 +41,18 @@ export * from './select';
 export * from './combobox';
 export * from './tags-input';
 export { default as Mermaid } from './Mermaid.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export * from './radio-group';
+export { default as Notice } from './Notice.svelte';
+export { default as Figure } from './Figure.svelte';
+export { default as Reveal } from './Reveal.svelte';
+export { default as PrevNext } from './PrevNext.svelte';
+export { default as LaTeX } from './LaTeX.svelte';
+export { default as InlineLaTeX } from './InlineLaTeX.svelte';
+export * from './code-block';
+export { default as YouTube } from './YouTube.svelte';
+export { default as YoutubeTimestamps } from './YoutubeTimestamps.svelte';
+export { default as YoutubeTimestampAt } from './YoutubeTimestampAt.svelte';
+export { default as Chart } from './Chart.svelte';
+export { default as Manim } from './Manim.svelte';
+export * from './questions';

package/dist/questions/MultipleChoiceQuestion.svelte

@@ -0,0 +1,167 @@
+<!-- libs/helix-svelte/src/questions/MultipleChoiceQuestion.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helix-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/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<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/helix-svelte/src/questions/NumericQuestion.svelte -->
+<!-- Closely based on: diffbook Quiz, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    questionCardBase,
+    questionPromptBase,
+    questionCheckButtonBase,
+    questionInputBase,
+    questionUnitBase,
+    feedbackCorrectBase,
+    feedbackIncorrectBase,
+    feedbackExplanationBase,
+    cn,
+  } from '@cloudvoyant/helix';
+  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;