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

package/dist/docs/DocsLinksPanel.css

@@ -0,0 +1,61 @@
+  .docs-link-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding-top: 0.45rem;
+  }
+
+  .docs-links-panel {
+    max-width: 64rem;
+    margin-top: 1.25rem;
+  }
+
+  .docs-link-card {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.2rem;
+    border: 0;
+    border-radius: 0.35rem;
+    background: transparent;
+    color: inherit;
+    cursor: default;
+    font: inherit;
+    text-align: left;
+    padding: 0.5rem;
+  }
+
+  .docs-link-card:has(.docs-link-card__target:hover),
+  .docs-link-card:has(.docs-link-card__target:focus-visible) {
+    background: var(--docs-subtle);
+  }
+
+  .docs-link-card__target {
+    display: inline-flex;
+    width: fit-content;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+    padding: 0;
+  }
+
+  .docs-link-card__target:hover,
+  .docs-link-card__target:focus-visible {
+    outline: 0;
+  }
+
+  .docs-link-card .application-markdown-preview {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    font-size: 0.82rem;
+  }
+
+  .docs-link-card .application-markdown-preview :is(.carta-renderer, .carta-viewer) {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }

package/dist/docs/DocsLinksPanel.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import './DocsLinksPanel.css';
+	import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
+	import MarkdownPreview from "./DocsMarkdownPreview.svelte";
+	import type { DocsBacklink, DocsWikiLink } from '../model';
+
+	let {
+		ambiguousLinks,
+		outgoingLinks,
+		backlinks,
+		onActiveNoteChange
+	}: {
+		ambiguousLinks: DocsWikiLink[];
+		outgoingLinks: DocsWikiLink[];
+		backlinks: DocsBacklink[];
+		onActiveNoteChange: (noteId: string | null) => void;
+	} = $props();
+</script>
+
+<section class="docs-links-panel">
+	<div class="docs-links-panel__heading">
+		<h3>Links</h3>
+		<p>Backlinks and outgoing wikilinks.</p>
+	</div>
+	{#if ambiguousLinks.length}
+		<div class="docs-alert small">
+			<AlertCircleIcon />
+			<span>Some wikilinks match multiple notes. Use a stable note id.</span>
+		</div>
+	{/if}
+	<div class="docs-link-list">
+		{#each outgoingLinks as link (`${link.raw}-${link.index}`)}
+			<article class="docs-link-card">
+				<small>Out</small>
+				<MarkdownPreview value={link.raw} compact />
+			</article>
+		{/each}
+		{#each backlinks as backlink (`${backlink.sourceNoteId}-${backlink.raw}`)}
+			<article class="docs-link-card">
+				<button
+					type="button"
+					class="docs-link-card__target"
+					onclick={() => onActiveNoteChange(backlink.sourceNoteId)}
+				>
+					<small>Backlink from {backlink.sourceTitle}</small>
+				</button>
+				<MarkdownPreview value={backlink.excerpt} compact />
+			</article>
+		{:else}
+			{#if outgoingLinks.length === 0}
+				<p class="docs-muted">No links yet.</p>
+			{/if}
+		{/each}
+	</div>
+</section>

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

@@ -0,0 +1,11 @@
+import './DocsLinksPanel.css';
+import type { DocsBacklink, DocsWikiLink } from '../model';
+type $$ComponentProps = {
+    ambiguousLinks: DocsWikiLink[];
+    outgoingLinks: DocsWikiLink[];
+    backlinks: DocsBacklink[];
+    onActiveNoteChange: (noteId: string | null) => void;
+};
+declare const DocsLinksPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsLinksPanel = ReturnType<typeof DocsLinksPanel>;
+export default DocsLinksPanel;

package/dist/docs/DocsMarkdownField.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { MarkdownComposer } from "@lapismd/design-core/chat";
+  import { FormField } from "@lapismd/design-core/forms";
+
+  let {
+    value,
+    label,
+    placeholder = "",
+    showLabel = true,
+    onChange,
+  }: {
+    value: string;
+    label: string;
+    placeholder?: string;
+    /** False when a parent form field already shows the visible label. */
+    showLabel?: boolean;
+    onChange: (value: string) => void;
+  } = $props();
+</script>
+
+<div class="docs-markdown-field">
+  {#if showLabel}
+    <FormField {label} as="div">
+      {@render composer()}
+    </FormField>
+  {:else}
+    {@render composer()}
+  {/if}
+</div>
+
+{#snippet composer()}
+  <MarkdownComposer
+    {value}
+    {label}
+    inputLabel={label}
+    placeholder={placeholder || label}
+    presentation="document"
+    showSendButton={false}
+    showHint={false}
+    submitOnEnter={false}
+    onChange={onChange}
+    onSubmit={() => {}}
+  />
+{/snippet}
+
+<style>
+  .docs-markdown-field {
+    min-width: 0;
+  }
+
+  .docs-markdown-field :global(.ui-markdown-composer__editor.mira) {
+    height: auto;
+    min-height: 1.4rem;
+  }
+
+  .docs-markdown-field :global(.mira__body) {
+    flex: none;
+    height: auto;
+    min-height: 0;
+  }
+
+  .docs-markdown-field :global(.cm-editor),
+  .docs-markdown-field :global(.cm-scroller),
+  .docs-markdown-field :global(.cm-content) {
+    height: auto;
+    min-height: 0;
+    background: transparent;
+  }
+
+  .docs-markdown-field :global(.ui-markdown-composer[data-presentation="document"]) {
+    --_composer-avatar-width: 0px;
+    --_composer-avatar-gap: 0px;
+    --_composer-editor-padding: 0px;
+    --ui-markdown-composer-editor-padding: 0px;
+    --ui-markdown-composer-min-height: 1.4rem;
+    --ui-markdown-composer-document-min-height: 1.4rem;
+  }
+
+  .docs-markdown-field :global(.ui-markdown-composer[data-presentation="document"] .ui-markdown-composer__input-row) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  /* The leading icon is centered in an icon-sm button; shift the row by that inset. */
+  .docs-markdown-field :global(.ui-markdown-composer__actions) {
+    margin-inline-start: calc(
+      (var(--ui-button-icon-size, calc(var(--spacing) * 4)) - (var(--spacing) * 8)) / 2
+    );
+  }
+
+  .docs-markdown-field :global(.ui-markdown-composer__avatar) {
+    display: none;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    value: string;
+    label: string;
+    placeholder?: string;
+    /** False when a parent form field already shows the visible label. */
+    showLabel?: boolean;
+    onChange: (value: string) => void;
+};
+declare const DocsMarkdownField: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsMarkdownField = ReturnType<typeof DocsMarkdownField>;
+export default DocsMarkdownField;

package/dist/docs/DocsMarkdownPreview.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  /**
+   * Docs markdown reading surface.
+   * Uses the host MarkdownRenderer when the app provides one, and Mira preview otherwise.
+   */
+  import { MarkdownPreview } from "@lapismd/mira/preview";
+  import "@lapismd/mira/styles.css";
+  import "@lapismd/mira/themes/obsidian.css";
+  import {
+    Component,
+    MarkdownRenderer,
+    useApplicationState,
+    type App,
+  } from "@lapis-notes/api";
+  import { onDestroy } from "svelte";
+  import {
+    lapisMarkdownExtensions,
+    providedMarkdownRenderer,
+  } from "./lapis-markdown-extensions";
+  import type { MarkdownFloatingTocMode } from "./candidates/markdown-floating-toc";
+  import {
+    DOCS_MEDIA_SENTINEL_PREFIX,
+    decodeDocsMediaSentinel,
+    resolveDocsMediaRelativePath,
+  } from "../model/docs-relative-media";
+  import { getDocsMediaResolver } from "../model/docs-media-context";
+
+  class DocsMarkdownLifecycle extends Component {}
+
+  let {
+    value = "",
+    empty = "",
+    compact = false,
+    collapsedMaxHeight = 0,
+    expandLabel = "Show more",
+    collapseLabel = "Show less",
+    floatingToc = "auto" as MarkdownFloatingTocMode,
+    sourcePath = "",
+    headingIdPrefix = "",
+  }: {
+    value?: string;
+    empty?: string;
+    compact?: boolean;
+    collapsedMaxHeight?: number;
+    expandLabel?: string;
+    collapseLabel?: string;
+    floatingToc?: MarkdownFloatingTocMode;
+    sourcePath?: string;
+    headingIdPrefix?: string;
+  } = $props();
+
+  let application: App | null = null;
+  try {
+    application = useApplicationState();
+  } catch {
+    application = null;
+  }
+
+  const blobUrls = new Set<string>();
+  let previewRoot = $state<HTMLDivElement | null>(null);
+  let resolveGeneration = 0;
+  let expanded = $state(false);
+
+  const mediaResolver = getDocsMediaResolver();
+  const displayValue = $derived(value.trim() ? value : empty);
+  const markdownExtensions = $derived(
+    lapisMarkdownExtensions(application, sourcePath, displayValue),
+  );
+  const useHostRenderer = $derived(
+    providedMarkdownRenderer(application) !== null,
+  );
+  const collapseEnabled = $derived(collapsedMaxHeight > 0 && !expanded);
+  let host = $state<HTMLElement | null>(null);
+  let renderRevision = 0;
+
+  $effect(() => {
+    const target = host;
+    const value = displayValue;
+    const path = sourcePath;
+    const app = application;
+    if (!useHostRenderer || !app || !target || !value) return;
+
+    const revision = ++renderRevision;
+    const lifecycle = new DocsMarkdownLifecycle();
+    lifecycle.load();
+    target.replaceChildren();
+    void MarkdownRenderer.render(app, value, target, path, lifecycle).catch(
+      (error) => {
+        if (revision !== renderRevision) return;
+        target.textContent =
+          error instanceof Error ? error.message : String(error);
+      },
+    );
+
+    return () => {
+      renderRevision += 1;
+      lifecycle.unload();
+    };
+  });
+
+  function revokeBlobUrls() {
+    for (const url of blobUrls) URL.revokeObjectURL(url);
+    blobUrls.clear();
+  }
+
+  function mediaPathFromImage(
+    img: HTMLImageElement,
+    notePath: string,
+  ): string | null {
+    const dataPath = img.getAttribute("data-cv-docs-media");
+    if (dataPath) return dataPath;
+
+    const src = img.getAttribute("src") ?? "";
+    if (!src) return null;
+    if (src.startsWith(DOCS_MEDIA_SENTINEL_PREFIX)) {
+      return decodeDocsMediaSentinel(src);
+    }
+    if (/^(https?:|data:|blob:)/i.test(src) || src.startsWith("/api/")) {
+      return null;
+    }
+    if (!notePath) return null;
+    return resolveDocsMediaRelativePath(src, notePath);
+  }
+
+  async function resolveSentinelImages(
+    root: HTMLElement,
+    generation: number,
+  ) {
+    const notePath = sourcePath.trim();
+    const images = root.querySelectorAll<HTMLImageElement>(
+      'img[data-cv-docs-media], img[src^="/__cvstudio-docs-media__/"], img[src^="../"], img[src^="./"], img[src^="media/"]',
+    );
+    await Promise.all(
+      [...images].map(async (img) => {
+        const relativePath = mediaPathFromImage(img, notePath);
+        if (!relativePath) return;
+        try {
+          const resolved = await mediaResolver(relativePath);
+          if (generation !== resolveGeneration) return;
+          if (resolved.startsWith("blob:")) blobUrls.add(resolved);
+          img.removeAttribute("data-cv-docs-media");
+          img.src = resolved;
+        } catch {
+          if (generation !== resolveGeneration) return;
+          img.removeAttribute("src");
+          img.removeAttribute("data-cv-docs-media");
+          img.alt = img.alt || "Media unavailable";
+        }
+      }),
+    );
+  }
+
+  $effect(() => {
+    const root = previewRoot;
+    const _value = value;
+    const _sourcePath = sourcePath;
+    if (!root) return;
+
+    revokeBlobUrls();
+    const generation = ++resolveGeneration;
+
+    const run = () => {
+      if (generation !== resolveGeneration || !previewRoot) return;
+      void resolveSentinelImages(previewRoot, generation);
+    };
+
+    const frame = requestAnimationFrame(run);
+    const retry = setTimeout(run, 160);
+    const observer = new MutationObserver(run);
+    observer.observe(root, { childList: true, subtree: true });
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(retry);
+      observer.disconnect();
+    };
+  });
+
+  onDestroy(() => {
+    resolveGeneration += 1;
+    revokeBlobUrls();
+  });
+</script>
+
+<div
+  class="docs-markdown-preview-root"
+  class:compact
+  class:collapsed={collapseEnabled}
+  style:--docs-preview-max-height={collapseEnabled
+    ? `${collapsedMaxHeight}px`
+    : undefined}
+  data-heading-prefix={headingIdPrefix || undefined}
+  data-floating-toc={floatingToc}
+  bind:this={previewRoot}
+>
+  {#if displayValue && useHostRenderer}
+    <div bind:this={host} class="docs-mira-markdown-preview docs-api-markdown"></div>
+  {:else if displayValue}
+    <MarkdownPreview
+      value={displayValue}
+      {sourcePath}
+      embed={compact}
+      extensions={markdownExtensions}
+      class="docs-mira-markdown-preview"
+    />
+  {:else if empty}
+    <p class="docs-markdown-preview-empty">{empty}</p>
+  {/if}
+  {#if collapsedMaxHeight > 0}
+    <button
+      type="button"
+      class="docs-markdown-preview-expand"
+      onclick={() => (expanded = !expanded)}
+    >
+      {expanded ? collapseLabel : expandLabel}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .docs-markdown-preview-root {
+    min-width: 0;
+  }
+
+  .docs-markdown-preview-root.collapsed {
+    max-height: var(--docs-preview-max-height);
+    overflow: hidden;
+  }
+
+  .docs-markdown-preview-empty {
+    margin: 0;
+    color: var(--muted-foreground, inherit);
+  }
+
+  .docs-markdown-preview-expand {
+    margin-top: 0.5rem;
+  }
+
+  .docs-markdown-preview-root :global(.docs-mira-markdown-preview) {
+    --mira-preview-padding: 0;
+    --mira-preview-bottom-padding: 0;
+    height: auto;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    text-align: start;
+  }
+
+  .docs-markdown-preview-root :global(.docs-mira-markdown-preview .cm-editor),
+  .docs-markdown-preview-root :global(.docs-mira-markdown-preview .cm-scroller),
+  .docs-markdown-preview-root :global(.docs-mira-markdown-preview .markdown-rendered),
+  .docs-markdown-preview-root :global(.docs-mira-markdown-preview .markdown-preview-view) {
+    background: transparent;
+    color: inherit;
+  }
+
+  .docs-markdown-preview-root :global(.docs-mira-markdown-preview .cm-sizer) {
+    margin-inline: 0;
+    max-width: none;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .docs-markdown-preview-root :global(.docs-mira-markdown-preview .markdown-view__document) {
+    padding-bottom: 0;
+  }
+
+  .docs-markdown-preview-root :global(.markdown-rendered a),
+  .docs-markdown-preview-root :global(.markdown-preview-surface a),
+  .docs-markdown-preview-root :global(a[data-mira-internal-link]),
+  .docs-markdown-preview-root :global(.mira-link-preview__trigger) {
+    color: var(--card-color, var(--column-color, var(--kanban-accent, var(--docs-brand, #2563eb))));
+    cursor: pointer;
+    font-weight: 850;
+    text-decoration: underline;
+    text-underline-offset: 0.18rem;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import "@lapismd/mira/styles.css";
+import "@lapismd/mira/themes/obsidian.css";
+import type { MarkdownFloatingTocMode } from "./candidates/markdown-floating-toc";
+type $$ComponentProps = {
+    value?: string;
+    empty?: string;
+    compact?: boolean;
+    collapsedMaxHeight?: number;
+    expandLabel?: string;
+    collapseLabel?: string;
+    floatingToc?: MarkdownFloatingTocMode;
+    sourcePath?: string;
+    headingIdPrefix?: string;
+};
+declare const DocsMarkdownPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsMarkdownPreview = ReturnType<typeof DocsMarkdownPreview>;
+export default DocsMarkdownPreview;

package/dist/docs/DocsReviewPanel.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import DocsCardPreviewStack from './DocsCardPreviewStack.svelte';
+	import type { DocsReviewQueueItem, DocsReviewRating, DocsReviewScope, DocsRevisionBlock } from '../model';
+	import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+
+	let {
+		dueCards,
+		reviewScope = 'note',
+		getNoteBlocks = () => [],
+		reviewAnswerOpenById = $bindable({}),
+		onReviewCard
+	}: {
+		dueCards: DocsReviewQueueItem[];
+		reviewScope?: DocsReviewScope;
+		getNoteBlocks?: (noteId: string) => DocsRevisionBlock[];
+		reviewAnswerOpenById: Record<string, boolean>;
+		onReviewCard: (
+			noteId: string,
+			cardId: string,
+			rating: DocsReviewRating
+		) => void | Promise<void>;
+	} = $props();
+
+	const stackItems = $derived(
+		dueCards.map((item) => ({
+			key: `${item.noteId}:${item.cardId}`,
+			card: item.card,
+			noteId: item.noteId,
+			noteTitle: item.noteTitle,
+			noteSourcePath: item.noteSourcePath,
+			noteBlocks: getNoteBlocks(item.noteId),
+			dueAt: item.dueAt.slice(0, 10)
+		}))
+	);
+</script>
+
+<ScrollArea.Root class="docs-review-view">
+	<section class="docs-review-view__content">
+		{#if dueCards.length === 0}
+			<p class="docs-muted">
+				{reviewScope === 'workspace'
+					? 'No cards are due.'
+					: 'No cards are due for this note.'}
+			</p>
+		{:else}
+			{#if reviewScope === 'workspace'}
+				<header class="docs-review-view__header">
+					<p class="docs-review-view__summary">
+						{dueCards.length} {dueCards.length === 1 ? 'card' : 'cards'} due across your docs
+					</p>
+				</header>
+			{/if}
+			<DocsCardPreviewStack
+				items={stackItems}
+				ariaLabel={reviewScope === 'workspace' ? 'All due cards' : 'Due cards'}
+				mode="study"
+				blockSwipeWhenRevealed={true}
+				bind:previewAnswerOpenById={reviewAnswerOpenById}
+				{onReviewCard}
+			/>
+		{/if}
+	</section>
+</ScrollArea.Root>

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

@@ -0,0 +1,11 @@
+import type { DocsReviewQueueItem, DocsReviewRating, DocsReviewScope, DocsRevisionBlock } from '../model';
+type $$ComponentProps = {
+    dueCards: DocsReviewQueueItem[];
+    reviewScope?: DocsReviewScope;
+    getNoteBlocks?: (noteId: string) => DocsRevisionBlock[];
+    reviewAnswerOpenById: Record<string, boolean>;
+    onReviewCard: (noteId: string, cardId: string, rating: DocsReviewRating) => void | Promise<void>;
+};
+declare const DocsReviewPanel: import("svelte").Component<$$ComponentProps, {}, "reviewAnswerOpenById">;
+type DocsReviewPanel = ReturnType<typeof DocsReviewPanel>;
+export default DocsReviewPanel;