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

package/dist/docs/DocsSlidesPreview.css

@@ -0,0 +1,243 @@
+.docs-slides-preview {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 1rem;
+  min-height: 0;
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.docs-slides-preview:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--docs-accent) 18%, transparent);
+}
+
+.docs-slides-preview button:hover,
+.docs-slides-preview button:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--docs-accent) 18%, transparent);
+}
+
+.docs-slides-preview__toolbar,
+.docs-slides-preview__toolbar > div,
+.docs-slides-preview__controls,
+.docs-slide-dots {
+  display: flex;
+  align-items: center;
+}
+
+.docs-slides-preview__toolbar {
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.docs-slides-preview__toolbar > div {
+  gap: 0.5rem;
+}
+
+.docs-slides-preview__toolbar svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+.docs-slides-preview__toolbar span,
+.docs-slide-frame--stacked > span {
+  color: var(--docs-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.docs-slides-preview__toolbar span {
+  font-size: 0.82rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.docs-slides-preview__controls button,
+.docs-slide-dots button {
+  display: grid;
+  min-width: 2rem;
+  min-height: 2rem;
+  place-items: center;
+  border: 1px solid color-mix(in srgb, var(--docs-border) 82%, transparent);
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--docs-surface) 92%, transparent);
+  color: inherit;
+  cursor: pointer;
+}
+
+.docs-slides-preview__controls button:disabled {
+  cursor: default;
+  opacity: 0.42;
+}
+
+.docs-slide-stage {
+  display: grid;
+  min-height: 0;
+  place-items: center;
+}
+
+.docs-slide-frame {
+  aspect-ratio: 16 / 9;
+  box-sizing: border-box;
+  width: min(100%, 86rem);
+  max-height: 100%;
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--docs-border) 82%, transparent);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--docs-surface) 94%, transparent);
+  box-shadow: 0 18px 45px color-mix(in srgb, #000 7%, transparent);
+  padding: clamp(1.5rem, 4.5vw, 3.25rem);
+  padding-top: clamp(2rem, 5.5vw, 3.75rem);
+}
+
+@supports (height: 100%) {
+  .docs-slide-frame {
+    width: auto;
+    min-width: min(100%, 28rem);
+    max-width: 100%;
+    height: 100%;
+  }
+}
+
+.docs-slide-frame--rich {
+  --block-accent: var(--docs-accent);
+  display: grid;
+  align-content: stretch;
+  border-color: color-mix(in srgb, var(--block-accent) 24%, var(--docs-border));
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--block-accent) 11%, transparent),
+      transparent 58%
+    ),
+    linear-gradient(
+      315deg,
+      color-mix(in srgb, #10b981 7%, transparent),
+      transparent 52%
+    ),
+    color-mix(in srgb, var(--docs-surface) 95%, transparent);
+}
+
+.docs-slide-frame--concept,
+.docs-slide-frame--story {
+  --block-accent: #7c3aed;
+}
+
+.docs-slide-frame--procedure,
+.docs-slide-frame--resources {
+  --block-accent: #0891b2;
+}
+
+.docs-slide-frame--prompt,
+.docs-slide-frame--callout {
+  --block-accent: #dc2626;
+}
+
+.docs-slide-frame--code,
+.docs-slide-frame--table {
+  --block-accent: #059669;
+}
+
+.docs-slide-frame--rich .docs-rich-hero,
+.docs-slide-frame--rich .docs-rich-block {
+  min-height: 100%;
+  align-content: safe center;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
+.docs-slide-frame--rich .docs-rich-block {
+  overflow: visible;
+}
+
+.docs-slide-frame--rich .docs-rich-hero h1 {
+  max-width: 14ch;
+  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
+}
+
+.docs-slide-frame--rich .docs-rich-block h2 {
+  font-size: clamp(1.55rem, 3vw, 2.65rem);
+}
+
+.docs-slide-frame--rich .docs-rich-lede,
+.docs-slide-frame--rich .docs-rich-hero__summary {
+  font-size: clamp(1rem, 1.5vw, 1.25rem);
+}
+
+.docs-slide-frame .application-markdown-preview :is(.carta-renderer, .carta-viewer) {
+  min-height: 100%;
+  align-content: safe center;
+  gap: 0.85rem;
+  line-height: 1.65;
+}
+
+.docs-slide-frame .application-markdown-preview :is(h1, h2, h3) {
+  text-wrap: balance;
+}
+
+.docs-slide-frame .application-markdown-preview h1 {
+  font-size: clamp(2rem, 4vw, 3.6rem);
+  line-height: 1;
+}
+
+.docs-slide-frame .application-markdown-preview h2 {
+  font-size: clamp(1.45rem, 3vw, 2.4rem);
+}
+
+.docs-slide-dots {
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.docs-slide-dots button {
+  min-width: 1.75rem;
+  min-height: 1.75rem;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+
+.docs-slide-dots button[aria-current='true'] {
+  border-color: color-mix(in srgb, var(--docs-accent) 42%, var(--docs-border));
+  background: color-mix(in srgb, var(--docs-accent) 12%, transparent);
+  color: var(--docs-accent);
+}
+
+.docs-slides-stack {
+  display: none;
+}
+
+.docs-slide-frame--stacked {
+  aspect-ratio: auto;
+  width: 100%;
+  padding: 1rem;
+}
+
+@media (max-width: 720px) {
+  .docs-slide-stage,
+  .docs-slide-dots {
+    display: none;
+  }
+
+  .docs-slides-stack {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .docs-slides-preview {
+    display: block;
+  }
+
+  .docs-slide-frame {
+    width: 100%;
+    height: auto;
+    min-width: 0;
+  }
+}

package/dist/docs/DocsSlidesPreview.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import BookOpenIcon from '@lucide/svelte/icons/book-open';
+	import LayersIcon from '@lucide/svelte/icons/layers';
+	import Rows3Icon from '@lucide/svelte/icons/rows-3';
+	import TargetIcon from '@lucide/svelte/icons/target';
+	import type { DocsNote, DocsRevisionBlock } from '../model';
+	import DocsMarkdownPreview from './DocsMarkdownPreview.svelte';
+	import DocsRichBlock from './DocsRichBlock.svelte';
+	import './DocsSlidesPreview.css';
+	import { DOC_TYPE_LABELS } from './docs-workspace-helpers';
+
+	type RichSlide =
+		| { kind: 'intro'; id: string }
+		| { kind: 'block'; id: string; block: DocsRevisionBlock; index: number }
+		| { kind: 'body'; id: string };
+
+	let {
+		markdown,
+		note = null,
+		activeSlide = $bindable(0)
+	}: {
+		markdown: string;
+		note?: DocsNote | null;
+		activeSlide?: number;
+	} = $props();
+
+	const markdownSlides = $derived(splitSlides(markdown));
+	const richSlides = $derived(note ? buildRichSlides(note) : []);
+	const slideCount = $derived(note ? richSlides.length : markdownSlides.length);
+	const currentMarkdownSlide = $derived(markdownSlides[activeSlide] ?? '');
+	const currentRichSlide = $derived(richSlides[activeSlide]);
+
+	$effect(() => {
+		if (activeSlide >= slideCount) activeSlide = Math.max(0, slideCount - 1);
+	});
+
+	function stripFrontmatter(value: string) {
+		const trimmed = value.trim();
+		if (!trimmed.startsWith('---')) return trimmed;
+		const match = /^---\s*\n[\s\S]*?\n---\s*(?:\n|$)/.exec(trimmed);
+		return match ? trimmed.slice(match[0].length).trim() : trimmed;
+	}
+
+	function splitSlides(value: string) {
+		return stripFrontmatter(value)
+			.split(/\n\s*---\s*\n/g)
+			.map((slide) => slide.trim())
+			.filter(Boolean);
+	}
+
+	function selectSlide(index: number) {
+		activeSlide = Math.max(0, Math.min(index, slideCount - 1));
+	}
+
+	function buildRichSlides(value: DocsNote): RichSlide[] {
+		return [
+			{ kind: 'intro', id: `${value.id}-intro` },
+			...value.blocks.map((block, index) => ({
+				kind: 'block' as const,
+				id: block.id,
+				block,
+				index
+			})),
+			...(value.body ? [{ kind: 'body' as const, id: `${value.id}-body` }] : [])
+		];
+	}
+
+	function slideFrameClass(slide?: RichSlide) {
+		const kind = slide?.kind ?? 'markdown';
+		const blockType = slide?.kind === 'block' ? slide.block.type : kind;
+		return `docs-slide-frame docs-slide-frame--rich docs-slide-frame--${blockType}`;
+	}
+
+</script>
+
+{#snippet richSlide(slide: RichSlide, stacked = false)}
+	{#if note}
+		{#if slide.kind === 'intro'}
+			<article class="docs-rich-hero docs-rich-slide-hero">
+				<div class="docs-rich-hero__eyebrow">
+					<BookOpenIcon aria-hidden="true" />
+					<span>{DOC_TYPE_LABELS[note.docType] ?? note.docType}</span>
+				</div>
+				<h1>{note.title}</h1>
+				{#if note.summary}
+					<p class="docs-rich-hero__summary">{note.summary}</p>
+				{/if}
+				{#if note.learningGoal}
+					<div class="docs-rich-goal">
+						<TargetIcon aria-hidden="true" />
+						<div>
+							<span>Learning Goal</span>
+							<p>{note.learningGoal}</p>
+						</div>
+					</div>
+				{/if}
+				{#if note.tags.length}
+					<div class="docs-rich-tags" aria-label="Tags">
+						{#each note.tags as tag (tag)}
+							<span>#{tag}</span>
+						{/each}
+					</div>
+				{/if}
+			</article>
+		{:else if slide.kind === 'block'}
+			<DocsRichBlock
+				block={slide.block}
+				index={slide.index}
+				sectionId={`${stacked ? 'slide-stack' : 'slide'}-${slide.block.id}`}
+				headingIdPrefix={stacked ? 'docs-slide-stack-heading' : 'docs-slide-heading'}
+				extraClass="docs-rich-slide-block"
+				sourcePath={note.sourcePath}
+			/>
+		{:else if slide.kind === 'body'}
+			<section class="docs-rich-block docs-rich-block--text docs-rich-additional docs-rich-slide-block">
+				<div class="docs-rich-block__header">
+					<div class="docs-rich-block__icon"><Rows3Icon aria-hidden="true" /></div>
+					<div>
+						<p>Appendix</p>
+						<h2>Additional Notes</h2>
+					</div>
+				</div>
+				<DocsMarkdownPreview value={note.body} floatingToc="off" sourcePath={note.sourcePath} />
+			</section>
+		{/if}
+	{/if}
+{/snippet}
+
+{#if slideCount}
+	<section class="docs-slides-preview" aria-label="Slides preview">
+		<div class="docs-slides-preview__toolbar">
+			<div>
+				<LayersIcon aria-hidden="true" />
+				<span>Slide {activeSlide} of {Math.max(slideCount - 1, 0)}</span>
+			</div>
+			<div class="docs-slides-preview__controls">
+				<button
+					type="button"
+					aria-label="Previous slide"
+					disabled={activeSlide === 0}
+					onclick={() => selectSlide(activeSlide - 1)}
+				>
+					<ChevronLeftIcon aria-hidden="true" />
+				</button>
+				<button
+					type="button"
+					aria-label="Next slide"
+					disabled={activeSlide === slideCount - 1}
+					onclick={() => selectSlide(activeSlide + 1)}
+				>
+					<ChevronRightIcon aria-hidden="true" />
+				</button>
+			</div>
+		</div>
+
+		<div class="docs-slide-stage">
+			<div class={note ? slideFrameClass(currentRichSlide) : 'docs-slide-frame'}>
+				{#if note && currentRichSlide}
+					{@render richSlide(currentRichSlide)}
+				{:else}
+					{#key `${activeSlide}:${currentMarkdownSlide}`}
+						<DocsMarkdownPreview
+							value={currentMarkdownSlide}
+							floatingToc="off"
+							sourcePath={note?.sourcePath ?? ''}
+						/>
+					{/key}
+				{/if}
+			</div>
+		</div>
+
+		<nav class="docs-slide-dots" aria-label="Select slide">
+			{#each Array.from({ length: slideCount }) as _, index (index)}
+				<button
+					type="button"
+					aria-label={`Show slide ${index}`}
+					aria-current={activeSlide === index ? 'true' : undefined}
+					onclick={() => selectSlide(index)}
+				>
+					{index}
+				</button>
+			{/each}
+		</nav>
+
+		<div class="docs-slides-stack" aria-label="All slides">
+			{#each note ? richSlides : markdownSlides as slide, index (index)}
+				<article class={note ? `${slideFrameClass(slide as RichSlide)} docs-slide-frame--stacked` : 'docs-slide-frame docs-slide-frame--stacked'}>
+					<span>Slide {index}</span>
+					{#if note}
+						{@render richSlide(slide as RichSlide, true)}
+					{:else}
+						<DocsMarkdownPreview
+							value={slide as string}
+							floatingToc="off"
+							sourcePath=""
+						/>
+					{/if}
+				</article>
+			{/each}
+		</div>
+	</section>
+{:else}
+	<p class="docs-muted">No slide content yet.</p>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { DocsNote } from '../model';
+import './DocsSlidesPreview.css';
+type $$ComponentProps = {
+    markdown: string;
+    note?: DocsNote | null;
+    activeSlide?: number;
+};
+declare const DocsSlidesPreview: import("svelte").Component<$$ComponentProps, {}, "activeSlide">;
+type DocsSlidesPreview = ReturnType<typeof DocsSlidesPreview>;
+export default DocsSlidesPreview;