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

package/dist/docs/DocsChapterFooter.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">
+	import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
+	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import HomeIcon from '@lucide/svelte/icons/home';
+	import SquareCheckIcon from '@lucide/svelte/icons/square-check';
+	import SquareIcon from '@lucide/svelte/icons/square';
+	import type { DocsBookChapterNavigation, DocsNote } from '../model';
+
+	let {
+		note,
+		chapterNavigation,
+		saving = false,
+		onToggleComplete = () => {},
+		onOpenNote = () => {}
+	}: {
+		note: DocsNote;
+		chapterNavigation: DocsBookChapterNavigation;
+		saving?: boolean;
+		onToggleComplete?: (completed: boolean) => void | Promise<void>;
+		onOpenNote?: (noteId: string) => void;
+	} = $props();
+
+	const completed = $derived(Boolean(note.completedAt));
+	const previousChapter = $derived(chapterNavigation.previousChapter);
+	const nextChapter = $derived(chapterNavigation.nextChapter);
+	const homeAriaLabel = $derived(
+		chapterNavigation.bookTitle
+			? `${chapterNavigation.bookTitle} home`
+			: 'Book home'
+	);
+
+	function toggleComplete() {
+		if (saving) return;
+		void onToggleComplete(!completed);
+	}
+</script>
+
+<footer class="docs-chapter-footer" aria-label="Chapter navigation">
+	<div class="docs-chapter-footer__complete" class:is-complete={completed}>
+		{#if completed}
+			<span class="docs-chapter-footer__badge" aria-hidden="true">
+				<CheckIcon />
+			</span>
+		{/if}
+	</div>
+
+	<div class="docs-chapter-footer__nav">
+		<div class="docs-chapter-footer__side docs-chapter-footer__side--prev">
+			<div class="docs-chapter-footer__actions">
+				{#if previousChapter}
+					<button
+						type="button"
+						class="docs-chapter-footer__button"
+						onclick={() => onOpenNote(previousChapter.noteId)}
+					>
+						<ArrowLeftIcon aria-hidden="true" />
+						<span>Back lesson</span>
+					</button>
+				{:else}
+					<span class="docs-chapter-footer__button is-disabled" aria-disabled="true">
+						<ArrowLeftIcon aria-hidden="true" />
+						<span>Back lesson</span>
+					</span>
+				{/if}
+				<button
+					type="button"
+					class="docs-chapter-footer__button"
+					aria-label={homeAriaLabel}
+					onclick={() => onOpenNote(chapterNavigation.bookIndexNoteId)}
+				>
+					<HomeIcon aria-hidden="true" />
+					<span>Home</span>
+				</button>
+			</div>
+			{#if previousChapter}
+				<small>{previousChapter.title}</small>
+			{/if}
+		</div>
+
+		<div class="docs-chapter-footer__side docs-chapter-footer__side--next">
+			<div class="docs-chapter-footer__actions">
+				<button
+					type="button"
+					class="docs-chapter-footer__button docs-chapter-footer__complete-button"
+					class:is-complete={completed}
+					disabled={saving}
+					aria-pressed={completed}
+					onclick={toggleComplete}
+				>
+					{#if completed}
+						<SquareCheckIcon aria-hidden="true" />
+						<span>Completed</span>
+					{:else}
+						<SquareIcon aria-hidden="true" />
+						<span>Mark As Completed</span>
+					{/if}
+				</button>
+				{#if nextChapter}
+					<button
+						type="button"
+						class="docs-chapter-footer__button"
+						onclick={() => onOpenNote(nextChapter.noteId)}
+					>
+						<span>Next</span>
+						<ArrowRightIcon aria-hidden="true" />
+					</button>
+				{:else}
+					<span class="docs-chapter-footer__button is-disabled" aria-disabled="true">
+						<span>Next</span>
+						<ArrowRightIcon aria-hidden="true" />
+					</span>
+				{/if}
+			</div>
+			{#if nextChapter}
+				<small>{nextChapter.title}</small>
+			{/if}
+		</div>
+	</div>
+</footer>
+
+<style>
+	.docs-chapter-footer {
+		display: grid;
+		gap: 1rem;
+		margin-top: 1.5rem;
+		padding-top: 1.25rem;
+		border-top: 1px solid color-mix(in srgb, var(--docs-border, var(--border)) 78%, transparent);
+	}
+
+	.docs-chapter-footer__complete {
+		display: flex;
+		justify-content: flex-end;
+		min-height: 1.75rem;
+	}
+
+	.docs-chapter-footer__badge {
+		display: grid;
+		place-items: center;
+		width: 1.85rem;
+		height: 1.85rem;
+		border-radius: 999px;
+		background: #22c55e;
+		color: white;
+		box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, #22c55e 35%, transparent);
+	}
+
+	.docs-chapter-footer__badge :global(svg) {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.docs-chapter-footer__nav {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	.docs-chapter-footer__side {
+		display: grid;
+		gap: 0.35rem;
+		min-width: 0;
+	}
+
+	.docs-chapter-footer__side--next {
+		margin-left: auto;
+		justify-items: end;
+		text-align: right;
+	}
+
+	.docs-chapter-footer__actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: 0.55rem;
+	}
+
+	.docs-chapter-footer__side--next .docs-chapter-footer__actions {
+		justify-content: flex-end;
+	}
+
+	.docs-chapter-footer__button {
+		display: inline-flex;
+		align-items: center;
+		align-self: start;
+		width: fit-content;
+		gap: 0.4rem;
+		padding: 0.45rem 0.75rem;
+		border: 1px solid color-mix(in srgb, #6366f1 45%, var(--docs-border, var(--border)));
+		border-radius: 0.45rem;
+		background: color-mix(in srgb, var(--docs-surface, var(--background)) 94%, transparent);
+		color: #4f46e5;
+		font: inherit;
+		font-size: 0.9rem;
+		font-weight: 600;
+		line-height: 1.2;
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	.docs-chapter-footer__button :global(svg) {
+		width: 0.95rem;
+		height: 0.95rem;
+	}
+
+	.docs-chapter-footer__button:hover,
+	.docs-chapter-footer__button:focus-visible {
+		border-color: #4f46e5;
+		outline: 0;
+		box-shadow: 0 0 0 3px color-mix(in srgb, #4f46e5 16%, transparent);
+	}
+
+	.docs-chapter-footer__button.is-disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	.docs-chapter-footer__complete-button.is-complete {
+		border-color: color-mix(in srgb, #22c55e 55%, var(--docs-border, var(--border)));
+		color: #15803d;
+	}
+
+	.docs-chapter-footer__side small {
+		color: var(--docs-muted, var(--muted-foreground));
+		font-size: 0.78rem;
+		line-height: 1.35;
+	}
+
+	@media (max-width: 640px) {
+		.docs-chapter-footer__nav {
+			flex-direction: column;
+		}
+
+		.docs-chapter-footer__side--next {
+			margin-left: 0;
+			justify-items: start;
+			text-align: left;
+			width: 100%;
+		}
+
+		.docs-chapter-footer__side--next .docs-chapter-footer__actions {
+			justify-content: flex-start;
+		}
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { DocsBookChapterNavigation, DocsNote } from '../model';
+type $$ComponentProps = {
+    note: DocsNote;
+    chapterNavigation: DocsBookChapterNavigation;
+    saving?: boolean;
+    onToggleComplete?: (completed: boolean) => void | Promise<void>;
+    onOpenNote?: (noteId: string) => void;
+};
+declare const DocsChapterFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsChapterFooter = ReturnType<typeof DocsChapterFooter>;
+export default DocsChapterFooter;

package/dist/docs/DocsChapterScrollRing.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		chapterScrollPercent = 0
+	}: {
+		chapterScrollPercent?: number;
+	} = $props();
+
+	const chapterPercent = $derived(Math.max(0, Math.min(100, Math.round(chapterScrollPercent))));
+	const ringRadius = 15.5;
+	const ringCircumference = 2 * Math.PI * ringRadius;
+	const chapterRingOffset = $derived(ringCircumference * (1 - chapterPercent / 100));
+</script>
+
+<div
+	class="docs-chapter-scroll-ring"
+	role="progressbar"
+	aria-label="Chapter scroll progress"
+	aria-valuemin={0}
+	aria-valuemax={100}
+	aria-valuenow={chapterPercent}
+>
+	<svg viewBox="0 0 36 36" aria-hidden="true">
+		<circle class="docs-chapter-scroll-ring__track" cx="18" cy="18" r={ringRadius}></circle>
+		<circle
+			class="docs-chapter-scroll-ring__fill"
+			cx="18"
+			cy="18"
+			r={ringRadius}
+			stroke-dasharray={ringCircumference}
+			stroke-dashoffset={chapterRingOffset}
+		></circle>
+	</svg>
+	{#if chapterPercent >= 100}
+		<span class="docs-chapter-scroll-ring__check"><CheckIcon /></span>
+	{:else}
+		<span class="docs-chapter-scroll-ring__label">{chapterPercent}%</span>
+	{/if}
+</div>
+
+<style>
+	.docs-chapter-scroll-ring {
+		position: relative;
+		z-index: 36;
+		display: grid;
+		width: 2.35rem;
+		height: 2.35rem;
+		place-items: center;
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--background) 95%, transparent);
+		box-shadow: 0 0.55rem 1.2rem color-mix(in srgb, var(--foreground) 10%, transparent);
+		backdrop-filter: blur(10px);
+		pointer-events: none;
+	}
+
+	.docs-chapter-scroll-ring svg {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		transform: rotate(-90deg);
+	}
+
+	.docs-chapter-scroll-ring__track,
+	.docs-chapter-scroll-ring__fill {
+		fill: none;
+		stroke-width: 3;
+	}
+
+	.docs-chapter-scroll-ring__track {
+		stroke: color-mix(in srgb, var(--border) 85%, transparent);
+	}
+
+	.docs-chapter-scroll-ring__fill {
+		stroke: color-mix(in srgb, var(--primary) 72%, #22c55e);
+		stroke-linecap: round;
+		transition: stroke-dashoffset 80ms linear;
+	}
+
+	.docs-chapter-scroll-ring__label,
+	.docs-chapter-scroll-ring__check {
+		position: relative;
+		z-index: 1;
+		color: var(--foreground);
+		font-size: 0.58rem;
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.docs-chapter-scroll-ring__check {
+		display: grid;
+		place-items: center;
+		color: #16a34a;
+	}
+
+	.docs-chapter-scroll-ring__check :global(svg) {
+		width: 0.85rem;
+		height: 0.85rem;
+	}
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    chapterScrollPercent?: number;
+};
+declare const DocsChapterScrollRing: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsChapterScrollRing = ReturnType<typeof DocsChapterScrollRing>;
+export default DocsChapterScrollRing;