@lapis-notes/lapis-plugin-docs 0.0.0-stage → 0.2.0

package/dist/docs/DocsBookNavigation.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DocsBookChapterNavigation, DocsBookNavigation } from '../model';
+type $$ComponentProps = {
+    book: DocsBookNavigation;
+    activeNoteId: string;
+    chapterNavigation?: DocsBookChapterNavigation | null;
+    variant?: 'toc' | 'floating';
+    onOpenNote?: (noteId: string) => void;
+};
+declare const DocsBookNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsBookNavigation = ReturnType<typeof DocsBookNavigation>;
+export default DocsBookNavigation;

package/dist/docs/DocsBooksColumn.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { DocsBookNavigation, DocsNoteListItem } from "../model";
+
+  let {
+    books = [],
+    notes = [],
+    activeNoteId = null,
+    onOpenNote = () => {},
+  }: {
+    books?: DocsBookNavigation[];
+    notes?: DocsNoteListItem[];
+    activeNoteId?: string | null;
+    onOpenNote?: (noteId: string) => void;
+  } = $props();
+
+  const claimedIds = $derived(
+    new Set(
+      books.flatMap((book) => [
+        book.indexNoteId,
+        ...book.chapters.map((chapter) => chapter.noteId),
+      ]),
+    ),
+  );
+  const standaloneNotes = $derived(
+    notes.filter((note) => !claimedIds.has(note.id)),
+  );
+</script>
+
+<nav class="docs-books" aria-label="Books">
+  {#if books.length}
+    {#each books as book (book.id)}
+      <section class="docs-books__book" aria-label={book.title}>
+        <button
+          type="button"
+          class="docs-books__index"
+          aria-current={activeNoteId === book.indexNoteId ? "page" : undefined}
+          onclick={() => onOpenNote(book.indexNoteId)}
+        >
+          {book.title}
+        </button>
+        <ol>
+          {#each book.chapters as chapter (chapter.index + chapter.noteId)}
+            <li>
+              {#if chapter.resolved}
+                <button
+                  type="button"
+                  aria-current={activeNoteId === chapter.noteId ? "page" : undefined}
+                  onclick={() => onOpenNote(chapter.noteId)}
+                >
+                  <span>{chapter.index + 1}</span>
+                  {chapter.title}
+                </button>
+              {:else}
+                <span class="docs-books__missing">{chapter.title}</span>
+              {/if}
+            </li>
+          {/each}
+        </ol>
+      </section>
+    {/each}
+  {:else}
+    <p class="docs-books__empty">No books in this vault.</p>
+  {/if}
+  {#if standaloneNotes.length}
+    <section class="docs-books__book" aria-label="Notes">
+      <p>Notes</p>
+      <ol>
+        {#each standaloneNotes as note (note.id)}
+          <li>
+            <button
+              type="button"
+              aria-current={activeNoteId === note.id ? "page" : undefined}
+              onclick={() => onOpenNote(note.id)}
+            >
+              {note.title || note.id}
+            </button>
+          </li>
+        {/each}
+      </ol>
+    </section>
+  {/if}
+</nav>

package/dist/docs/DocsBooksColumn.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DocsBookNavigation, DocsNoteListItem } from "../model";
+type $$ComponentProps = {
+    books?: DocsBookNavigation[];
+    notes?: DocsNoteListItem[];
+    activeNoteId?: string | null;
+    onOpenNote?: (noteId: string) => void;
+};
+declare const DocsBooksColumn: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsBooksColumn = ReturnType<typeof DocsBooksColumn>;
+export default DocsBooksColumn;

package/dist/docs/DocsCardBackMatter.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import DocsCardBlockExtra from './DocsCardBlockExtra.svelte';
+	import DocsCardReviewAnswer from './DocsCardReviewAnswer.svelte';
+	import { resolveCardBlockRefs } from '../model/docs-card-context';
+	import type { DocsCard, DocsRevisionBlock } from '../model';
+
+	let {
+		card,
+		noteSourcePath = '',
+		noteBlocks = [],
+		showExtras = false
+	}: {
+		card: DocsCard;
+		noteSourcePath?: string;
+		noteBlocks?: DocsRevisionBlock[];
+		showExtras?: boolean;
+	} = $props();
+
+	const blockResolution = $derived(resolveCardBlockRefs({ blocks: noteBlocks }, card.blockRefs));
+</script>
+
+<DocsCardReviewAnswer {card} {noteSourcePath} />
+
+{#if showExtras}
+	{#if blockResolution.resolved.length > 0 || blockResolution.missing.length > 0}
+		<DocsCardBlockExtra
+			blocks={blockResolution.resolved.map((item) => item.block)}
+			missingRefs={blockResolution.missing.map((item) => item.ref)}
+			sourcePath={noteSourcePath}
+		/>
+	{/if}
+{/if}

package/dist/docs/DocsCardBackMatter.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DocsCard, DocsRevisionBlock } from '../model';
+type $$ComponentProps = {
+    card: DocsCard;
+    noteSourcePath?: string;
+    noteBlocks?: DocsRevisionBlock[];
+    showExtras?: boolean;
+};
+declare const DocsCardBackMatter: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsCardBackMatter = ReturnType<typeof DocsCardBackMatter>;
+export default DocsCardBackMatter;

package/dist/docs/DocsCardBlockExtra.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { renderDocsBlockMarkdown } from '../model/markdown';
+	import type { DocsRevisionBlock } from '../model';
+	import DocsMarkdownPreview from './DocsMarkdownPreview.svelte';
+	import { BLOCK_TYPE_LABELS } from './docs-workspace-helpers';
+
+	let {
+		blocks = [],
+		missingRefs = [],
+		sourcePath = ''
+	}: {
+		blocks: DocsRevisionBlock[];
+		missingRefs?: string[];
+		sourcePath?: string;
+	} = $props();
+
+	function blockTitle(block: DocsRevisionBlock) {
+		return block.title?.trim() || BLOCK_TYPE_LABELS[block.type] || block.type;
+	}
+</script>
+
+{#if blocks.length > 0 || missingRefs.length > 0}
+	<section class="docs-card-extra docs-card-extra--blocks" aria-label="From note">
+		<h4 class="docs-card-extra__heading">From note</h4>
+		<div class="docs-card-extra__items">
+			{#each blocks as block (block.id)}
+				<article class="docs-card-extra__block">
+					<p class="docs-card-extra__block-label">{blockTitle(block)}</p>
+					<div class="docs-card-extra__block-body application-markdown-preview is-compact">
+						<DocsMarkdownPreview
+							compact
+							value={renderDocsBlockMarkdown(block, 3)}
+							{sourcePath}
+						/>
+					</div>
+				</article>
+			{/each}
+			{#each missingRefs as ref (ref)}
+				<p class="docs-card-extra__missing">Missing block: {ref}</p>
+			{/each}
+		</div>
+	</section>
+{/if}

package/dist/docs/DocsCardBlockExtra.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DocsRevisionBlock } from '../model';
+type $$ComponentProps = {
+    blocks: DocsRevisionBlock[];
+    missingRefs?: string[];
+    sourcePath?: string;
+};
+declare const DocsCardBlockExtra: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsCardBlockExtra = ReturnType<typeof DocsCardBlockExtra>;
+export default DocsCardBlockExtra;

package/dist/docs/DocsCardPreviewFlip.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import EyeIcon from '@lucide/svelte/icons/eye';
+	import DocsCardBackMatter from './DocsCardBackMatter.svelte';
+	import DocsCardPrompt from './DocsCardPrompt.svelte';
+	import DocsCardTagChips from './DocsCardTagChips.svelte';
+	import { REVIEW_RATINGS, REVIEW_RATING_LABELS } from '../model/docs-review-constants';
+	import { formatDocsReviewInterval, previewDocsCardRatings } from '../model/fsrs';
+	import type { DocsCard, DocsRevisionBlock, DocsReviewRating } from '../model';
+
+	let {
+		card,
+		noteTitle,
+		noteSourcePath = '',
+		dueAt,
+		noteBlocks = [],
+		revealed = false,
+		peek = false,
+		showIntervalPreview = false,
+		onReveal,
+		onHide,
+		onReview
+	}: {
+		card: DocsCard;
+		noteTitle: string;
+		noteSourcePath?: string;
+		dueAt?: string;
+		noteBlocks?: DocsRevisionBlock[];
+		revealed?: boolean;
+		peek?: boolean;
+		showIntervalPreview?: boolean;
+		onReveal?: () => void;
+		onHide?: () => void;
+		onReview?: (rating: DocsReviewRating) => void | Promise<void>;
+	} = $props();
+
+	const ratingPreviews = $derived(
+		showIntervalPreview && revealed && onReview ? previewDocsCardRatings(card) : null
+	);
+</script>
+
+<div
+	class={`docs-review-flip docs-card-preview-flip ${!peek && revealed ? 'docs-review-flip--revealed' : ''}`}
+	data-card-type={card.type}
+	data-card-status={card.status}
+	data-peek={peek ? 'true' : undefined}
+>
+	{#if peek}
+		<article class="docs-review-face docs-review-face--front docs-review-face--peek">
+			<div class="docs-review-face__meta">
+				<span class="docs-review-face__label">{noteTitle}</span>
+				{#if card.tags.length}
+					<DocsCardTagChips tags={card.tags} />
+				{:else if dueAt}
+					<span class="docs-review-face__label">Due {dueAt}</span>
+				{/if}
+			</div>
+			<div class="docs-review-face__scroll">
+				<div class="docs-review-face__prompt">
+					<span>Question</span>
+					<h3>
+						<DocsCardPrompt {card} />
+					</h3>
+				</div>
+			</div>
+		</article>
+	{:else}
+		<div class="docs-review-flip__inner">
+			<article class="docs-review-face docs-review-face--front" aria-hidden={revealed}>
+				<div class="docs-review-face__meta">
+					<span class="docs-review-face__label">{noteTitle}</span>
+					{#if card.tags.length}
+						<DocsCardTagChips tags={card.tags} />
+					{:else if dueAt}
+						<span class="docs-review-face__label">Due {dueAt}</span>
+					{/if}
+				</div>
+				<div class="docs-review-face__scroll">
+					<div class="docs-review-face__prompt">
+						<span>Question</span>
+						<h3>
+							<DocsCardPrompt {card} />
+						</h3>
+					</div>
+				</div>
+				<div class="docs-review-face__actions">
+					<button
+						type="button"
+						class="docs-review-show-answer"
+						disabled={revealed}
+						onclick={() => onReveal?.()}
+					>
+						<EyeIcon aria-hidden="true" />
+						Show Answer
+					</button>
+				</div>
+			</article>
+
+			<article class="docs-review-face docs-review-face--back" aria-hidden={!revealed}>
+				<div class="docs-review-face__meta">
+					<span class="docs-review-face__label">Answer</span>
+					<span class="docs-review-face__label">{card.type}</span>
+				</div>
+				<div class="docs-review-face__scroll">
+					<DocsCardBackMatter
+						{card}
+						{noteSourcePath}
+						{noteBlocks}
+						showExtras={revealed}
+					/>
+				</div>
+				<div class="docs-review-face__actions">
+					{#if onReview}
+						<div class="docs-rating-grid" aria-label="Rate your recall">
+							{#each REVIEW_RATINGS as rating (rating)}
+								<button
+									type="button"
+									class={`docs-rating-button docs-rating-button--${rating}`}
+									disabled={!revealed}
+									onclick={() => void onReview(rating)}
+								>
+									<span class="docs-rating-button__label">{REVIEW_RATING_LABELS[rating]}</span>
+									{#if ratingPreviews}
+										<span class="docs-rating-button__interval">
+											{formatDocsReviewInterval(ratingPreviews[rating].due)}
+										</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					{:else}
+						<button
+							type="button"
+							class="docs-review-show-answer docs-card-preview-question-button"
+							onclick={() => onHide?.()}
+						>
+							Show Question
+						</button>
+					{/if}
+				</div>
+			</article>
+		</div>
+	{/if}
+</div>

package/dist/docs/DocsCardPreviewFlip.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { DocsCard, DocsRevisionBlock, DocsReviewRating } from '../model';
+type $$ComponentProps = {
+    card: DocsCard;
+    noteTitle: string;
+    noteSourcePath?: string;
+    dueAt?: string;
+    noteBlocks?: DocsRevisionBlock[];
+    revealed?: boolean;
+    peek?: boolean;
+    showIntervalPreview?: boolean;
+    onReveal?: () => void;
+    onHide?: () => void;
+    onReview?: (rating: DocsReviewRating) => void | Promise<void>;
+};
+declare const DocsCardPreviewFlip: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsCardPreviewFlip = ReturnType<typeof DocsCardPreviewFlip>;
+export default DocsCardPreviewFlip;

package/dist/docs/DocsCardPreviewStack.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import FlipCardDeck, { type FlipCardDeckContext } from "./candidates/FlipCardDeck.svelte";
+	import DocsCardBackMatter from './DocsCardBackMatter.svelte';
+	import DocsCardPrompt from './DocsCardPrompt.svelte';
+	import DocsCardTagChips from './DocsCardTagChips.svelte';
+	import { REVIEW_RATINGS, REVIEW_RATING_LABELS } from '../model/docs-review-constants';
+	import { formatDocsReviewInterval, previewDocsCardRatings } from '../model/fsrs';
+	import type {
+		DocsCardStackItem,
+		DocsCardStackMode,
+		DocsReviewRating
+	} from '../model';
+	let {
+		items,
+		previewAnswerOpenById = $bindable({}),
+		ariaLabel = 'Card previews',
+		mode = 'browse',
+		initialIndex = 0,
+		blockSwipeWhenRevealed = false,
+		onReviewCard
+	}: {
+		items: DocsCardStackItem[];
+		previewAnswerOpenById: Record<string, boolean>;
+		ariaLabel?: string;
+		mode?: DocsCardStackMode;
+		initialIndex?: number;
+		blockSwipeWhenRevealed?: boolean;
+		onReviewCard?: (
+			noteId: string,
+			cardId: string,
+			rating: DocsReviewRating
+		) => void | Promise<void>;
+	} = $props();
+
+	function keyFor(item: unknown) {
+		return (item as DocsCardStackItem).key;
+	}
+
+	function ratingPreviewsFor(item: DocsCardStackItem, revealed: boolean) {
+		return mode === 'study' && revealed && onReviewCard
+			? previewDocsCardRatings(item.card)
+			: null;
+	}
+
+	async function reviewItem(
+		item: DocsCardStackItem,
+		rating: DocsReviewRating,
+		context: FlipCardDeckContext
+	) {
+		if (!onReviewCard || !item.noteId) return;
+		await onReviewCard(item.noteId, item.card.id, rating);
+		context.hide();
+		if (mode === 'study') context.reset();
+	}
+</script>
+
+<div class="docs-card-preview-stack">
+	<FlipCardDeck
+		{items}
+		{keyFor}
+		bind:revealedByKey={previewAnswerOpenById}
+		{ariaLabel}
+		mode={mode as 'browse' | 'study'}
+		{initialIndex}
+		{blockSwipeWhenRevealed}
+		emptyLabel="No cards yet."
+	>
+	{#snippet frontHeader(item)}
+		{@const stackItem = item as DocsCardStackItem}
+		<div class="docs-review-face__meta">
+			<span class="docs-review-face__label">{stackItem.noteTitle}</span>
+			{#if stackItem.card.tags.length}
+				<DocsCardTagChips tags={stackItem.card.tags} />
+			{:else if stackItem.dueAt}
+				<span class="docs-review-face__label">Due {stackItem.dueAt}</span>
+			{/if}
+		</div>
+	{/snippet}
+
+	{#snippet front(item, context)}
+		{@const stackItem = item as DocsCardStackItem}
+		<div
+			class="docs-review-face__content docs-review-face__content--front"
+			id={stackItem.noteId ? `docs-card-${stackItem.noteId}-${stackItem.card.id}` : undefined}
+		>
+			<div class="docs-review-face__prompt">
+				<span>Question</span>
+				<h3>
+					<DocsCardPrompt card={stackItem.card} />
+				</h3>
+			</div>
+		</div>
+	{/snippet}
+
+	{#snippet back(item, context)}
+		{@const stackItem = item as DocsCardStackItem}
+		<div class="docs-review-face__content docs-review-face__content--back">
+			<div class="docs-review-face__meta">
+				<span class="docs-review-face__label">Answer</span>
+				<span class="docs-review-face__label">{stackItem.card.type}</span>
+			</div>
+			<DocsCardBackMatter
+				card={stackItem.card}
+				noteSourcePath={stackItem.noteSourcePath}
+				noteBlocks={stackItem.noteBlocks ?? []}
+				showExtras={context.revealed}
+			/>
+		</div>
+	{/snippet}
+
+	{#snippet backActions(item, context)}
+		{@const stackItem = item as DocsCardStackItem}
+		{@const ratingPreviews = ratingPreviewsFor(stackItem, context.revealed)}
+		{#if onReviewCard && stackItem.noteId}
+			<div class="docs-rating-grid" aria-label="Rate your recall">
+				{#each REVIEW_RATINGS as rating (rating)}
+					<button
+						type="button"
+						class={`docs-rating-button docs-rating-button--${rating}`}
+						disabled={!context.revealed}
+						onclick={() => void reviewItem(stackItem, rating, context)}
+					>
+						<span class="docs-rating-button__label">{REVIEW_RATING_LABELS[rating]}</span>
+						{#if ratingPreviews}
+							<span class="docs-rating-button__interval">
+								{formatDocsReviewInterval(ratingPreviews[rating].due)}
+							</span>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		{:else}
+			<button type="button" class="flip-card-deck__primary-action docs-card-preview-question-button" onclick={context.hide}>
+				Show Question
+			</button>
+		{/if}
+	{/snippet}
+	</FlipCardDeck>
+</div>

package/dist/docs/DocsCardPreviewStack.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DocsCardStackItem, DocsCardStackMode, DocsReviewRating } from '../model';
+type $$ComponentProps = {
+    items: DocsCardStackItem[];
+    previewAnswerOpenById: Record<string, boolean>;
+    ariaLabel?: string;
+    mode?: DocsCardStackMode;
+    initialIndex?: number;
+    blockSwipeWhenRevealed?: boolean;
+    onReviewCard?: (noteId: string, cardId: string, rating: DocsReviewRating) => void | Promise<void>;
+};
+declare const DocsCardPreviewStack: import("svelte").Component<$$ComponentProps, {}, "previewAnswerOpenById">;
+type DocsCardPreviewStack = ReturnType<typeof DocsCardPreviewStack>;
+export default DocsCardPreviewStack;

package/dist/docs/DocsCardPrompt.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { docsCardQuestionParts } from './docs-card-display';
+	import type { DocsCard } from '../model';
+
+	let {
+		card,
+		revealClozes = false
+	}: {
+		card: DocsCard;
+		revealClozes?: boolean;
+	} = $props();
+</script>
+
+{#each docsCardQuestionParts(card) as part}
+	{#if part.kind === 'cloze'}
+		<span
+			class={revealClozes
+				? 'docs-cloze-gap docs-cloze-gap--revealed'
+				: part.hint
+					? 'docs-cloze-gap docs-cloze-gap--hint'
+					: 'docs-cloze-gap'}
+			aria-label={revealClozes
+				? 'Revealed cloze answer'
+				: part.hint
+					? `Hidden cloze, hint: ${part.hint}`
+					: 'Hidden cloze'}
+		>
+			{revealClozes ? part.text : part.hint ?? ''}
+		</span>
+	{:else}
+		{part.text}
+	{/if}
+{/each}

package/dist/docs/DocsCardPrompt.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocsCard } from '../model';
+type $$ComponentProps = {
+    card: DocsCard;
+    revealClozes?: boolean;
+};
+declare const DocsCardPrompt: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsCardPrompt = ReturnType<typeof DocsCardPrompt>;
+export default DocsCardPrompt;

package/dist/docs/DocsCardReviewAnswer.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import BrainIcon from '@lucide/svelte/icons/brain';
+	import DocsCardPrompt from './DocsCardPrompt.svelte';
+	import DocsMarkdownPreview from './DocsMarkdownPreview.svelte';
+	import { docsCardAnswerMarkdown } from './docs-card-answer-markdown';
+	import type { DocsCard } from '../model';
+
+	let { card, noteSourcePath = '' }: { card: DocsCard; noteSourcePath?: string } = $props();
+
+	const renderedAnswer = $derived(docsCardAnswerMarkdown(card.answer));
+</script>
+
+{#if card.type === 'cloze'}
+	<div class="docs-review-face__prompt docs-review-face__prompt--answer">
+		<h3>
+			<DocsCardPrompt {card} revealClozes />
+		</h3>
+	</div>
+	<div class="docs-review-face__answer docs-review-face__answer--context">
+		<BrainIcon aria-hidden="true" />
+		<div>
+			<span class="docs-review-face__answer-label">Context</span>
+			<DocsMarkdownPreview
+				value={renderedAnswer}
+				empty="No additional context has been added yet."
+				compact
+				floatingToc="off"
+				sourcePath={noteSourcePath}
+				headingIdPrefix={`docs-card-${card.id}-answer`}
+			/>
+		</div>
+	</div>
+{:else}
+	<div class="docs-review-face__answer">
+		<BrainIcon aria-hidden="true" />
+		<DocsMarkdownPreview
+			value={renderedAnswer}
+			empty="No answer has been added yet."
+			compact
+			floatingToc="off"
+			sourcePath={noteSourcePath}
+			headingIdPrefix={`docs-card-${card.id}-answer`}
+		/>
+	</div>
+{/if}

package/dist/docs/DocsCardReviewAnswer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocsCard } from '../model';
+type $$ComponentProps = {
+    card: DocsCard;
+    noteSourcePath?: string;
+};
+declare const DocsCardReviewAnswer: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsCardReviewAnswer = ReturnType<typeof DocsCardReviewAnswer>;
+export default DocsCardReviewAnswer;

package/dist/docs/DocsCardTagChips.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let {
+		tags = [],
+		limit = 2
+	}: {
+		tags?: string[];
+		limit?: number;
+	} = $props();
+
+	const visibleTags = $derived(tags.slice(0, limit));
+</script>
+
+{#if visibleTags.length}
+	<span class="docs-review-face__tags" aria-label="Tags">
+		{#each visibleTags as tag (tag)}
+			<span class="docs-review-face__tag">#{tag}</span>
+		{/each}
+	</span>
+{/if}

package/dist/docs/DocsCardTagChips.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    tags?: string[];
+    limit?: number;
+};
+declare const DocsCardTagChips: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsCardTagChips = ReturnType<typeof DocsCardTagChips>;
+export default DocsCardTagChips;