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

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

@@ -0,0 +1,48 @@
+import './DocsWorkspace.css';
+import './DocsCardsReview.css';
+import type { Snippet } from 'svelte';
+import { type YamlReviewDiff } from '@lapismd/design-core/forms';
+import type { CreateDocsNoteInput, DocsCard, DocsNote, DocsNotePanel, DocsReviewRating, DocsReviewScope, DocsWorkspace, DocsWorkspaceIndex } from '../model';
+type Props = {
+    workspace: DocsWorkspace | DocsWorkspaceIndex | null;
+    /** Full note for the active id; index rows are summaries only. */
+    activeNote?: DocsNote | null;
+    activeNoteId?: string | null;
+    activePanel?: DocsNotePanel;
+    activeCodingCardId?: string | null;
+    reviewScope?: DocsReviewScope;
+    previewMode?: boolean;
+    sidebarOpen?: boolean;
+    activeFolderTag?: string | null;
+    folderDisplayMode?: "panel" | "inline";
+    folderPanelCollapsed?: boolean;
+    loading?: boolean;
+    saving?: boolean;
+    error?: string | null;
+    onToggleSidebar?: () => void | Promise<void>;
+    onActiveNoteChange?: (noteId: string | null) => void;
+    onActivePanelChange?: (panel: DocsNotePanel) => void;
+    onActiveCodingCardChange?: (cardId: string | null) => void;
+    onReviewScopeChange?: (scope: DocsReviewScope) => void;
+    onPreviewModeChange?: (enabled: boolean) => void;
+    onActiveFolderTagChange?: (tag: string | null) => void;
+    onFolderPanelCollapsedChange?: (collapsed: boolean) => void;
+    onCreateNote?: (input?: CreateDocsNoteInput) => void | Promise<void>;
+    onSaveNote?: (note: DocsNote) => void | Promise<void>;
+    onDeleteNote?: (noteId: string) => void | Promise<void>;
+    onReviewCard?: (noteId: string, cardId: string, rating: DocsReviewRating) => void | Promise<void>;
+    onImportAnkiPackage?: (file: File) => void | Promise<void>;
+    onUploadAttachment?: (noteId: string, file: File) => Promise<string | null>;
+    /** Runtime media URL resolver for co-located docs images. */
+    resolveMediaUrl?: (relativePath: string) => string | Promise<string>;
+    loadingState?: Snippet;
+    emptyState?: Snippet<[() => void]>;
+    codingPractice?: Snippet<[DocsNote, DocsCard | null, (card: DocsCard) => void]>;
+    reviewContent?: Snippet;
+    reviewDiffs?: YamlReviewDiff[];
+    onUndoReview?: (id: string) => void;
+    onKeepReview?: (id: string) => void;
+};
+declare const DocsWorkspace: import("svelte").Component<Props, {}, "">;
+type DocsWorkspace = ReturnType<typeof DocsWorkspace>;
+export default DocsWorkspace;

package/dist/docs/DocsWorkspaceToolbar.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+  import BookOpenIcon from "@lucide/svelte/icons/book-open";
+  import ChevronsDownUpIcon from "@lucide/svelte/icons/chevrons-down-up";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+  import ClipboardIcon from "@lucide/svelte/icons/clipboard";
+  import PencilIcon from "@lucide/svelte/icons/pencil";
+  import PlusIcon from "@lucide/svelte/icons/plus";
+  import PresentationIcon from "@lucide/svelte/icons/presentation";
+  import Trash2Icon from "@lucide/svelte/icons/trash-2";
+  import UploadIcon from "@lucide/svelte/icons/upload";
+
+  import type { DocsNote, DocsNotePanel } from '../model';
+  import type { DisplayMode } from "./docs-workspace-helpers";
+
+  let {
+    draftNote,
+    filenameDraft = $bindable(""),
+    yamlMode = false,
+    saving = false,
+    activePanel,
+    previewMode = false,
+    showCollapseAll = false,
+    hasCollapsedSections = false,
+    collapseAllDisabled = false,
+    displayMode = $bindable("document"),
+    renderedDisplayMarkdown = "",
+    onCommitFilename,
+    onYamlModeChange,
+    onPanelChange,
+    onPreviewModeChange = () => {},
+    onToggleAllSections = () => {},
+    onAddCard,
+    onImportAnkiPackage,
+    onCopyRenderedMarkdown = () => {},
+    onDeleteNote,
+  }: {
+    draftNote: DocsNote | null;
+    filenameDraft: string;
+    yamlMode?: boolean;
+    saving?: boolean;
+    activePanel: DocsNotePanel;
+    previewMode?: boolean;
+    showCollapseAll?: boolean;
+    hasCollapsedSections?: boolean;
+    collapseAllDisabled?: boolean;
+    displayMode?: DisplayMode;
+    renderedDisplayMarkdown?: string;
+    onCommitFilename: () => void | Promise<void>;
+    onYamlModeChange: (enabled: boolean) => void;
+    onPanelChange: (panel: DocsNotePanel) => void;
+    onPreviewModeChange?: (enabled: boolean) => void;
+    onToggleAllSections?: () => void;
+    onAddCard: () => void;
+    onImportAnkiPackage?: (file: File) => void | Promise<void>;
+    onCopyRenderedMarkdown?: () => void | Promise<void>;
+    onDeleteNote: () => void | Promise<void>;
+  } = $props();
+
+  function toggleDisplayMode() {
+    displayMode = displayMode === "slides" ? "document" : "slides";
+  }
+
+  const isPreviewActive = $derived(
+    activePanel === "display" || (activePanel === "cards" && previewMode),
+  );
+
+  function togglePreviewMode() {
+    if (activePanel === "cards") {
+      onPreviewModeChange(!previewMode);
+      return;
+    }
+    onPanelChange(activePanel === "display" ? "note" : "display");
+  }
+</script>
+
+<div class="docs-toolbar">
+  <div class="docs-toolbar__title">
+    <div>
+      {#if draftNote}
+        <input
+          class="docs-toolbar__filename-input"
+          bind:value={filenameDraft}
+          aria-label="Note filename"
+          spellcheck={false}
+          onblur={() => void onCommitFilename()}
+          onkeydown={(event) => {
+            if (event.key === "Enter") event.currentTarget.blur();
+          }}
+        />
+      {:else}
+        <h1>Docs</h1>
+      {/if}
+    </div>
+  </div>
+  <div class="docs-toolbar__actions">
+    {#if draftNote}
+      <button
+        type="button"
+        class="docs-yaml-switch"
+        role="switch"
+        aria-checked={yamlMode}
+        aria-label="YAML"
+        onclick={() => onYamlModeChange(!yamlMode)}
+      >
+        <span class="docs-yaml-switch-track" aria-hidden="true">
+          <span class="docs-yaml-switch-thumb"></span>
+        </span>
+        <span>YAML</span>
+      </button>
+      {#if activePanel !== "practice"}
+      <button
+        type="button"
+        class="docs-view-toggle"
+        aria-label={isPreviewActive ? "Switch to edit mode" : "Switch to preview mode"}
+        title={isPreviewActive ? "Switch to edit mode" : "Switch to preview mode"}
+        disabled={yamlMode}
+        onclick={togglePreviewMode}
+      >
+        {#if isPreviewActive}
+          <PencilIcon aria-hidden="true" />
+        {:else}
+          <BookOpenIcon aria-hidden="true" />
+        {/if}
+      </button>
+      {/if}
+      {#if showCollapseAll && !yamlMode}
+        <button
+          type="button"
+          class="docs-collapse-all-button"
+          aria-label={hasCollapsedSections ? "Expand all sections" : "Collapse all sections"}
+          title={hasCollapsedSections ? "Expand all sections" : "Collapse all sections"}
+          disabled={collapseAllDisabled}
+          onclick={onToggleAllSections}
+        >
+          {#if hasCollapsedSections}
+            <ChevronsUpDownIcon aria-hidden="true" />
+          {:else}
+            <ChevronsDownUpIcon aria-hidden="true" />
+          {/if}
+        </button>
+      {/if}
+      {#if activePanel === "display" && !yamlMode}
+        <button
+          type="button"
+          class="docs-display-mode-toggle"
+          aria-label={displayMode === "slides" ? "Switch to document view" : "Switch to slides view"}
+          title={displayMode === "slides" ? "Switch to document view" : "Switch to slides view"}
+          onclick={toggleDisplayMode}
+        >
+          {#if displayMode === "slides"}
+            <BookOpenIcon aria-hidden="true" />
+            <span>Document</span>
+          {:else}
+            <PresentationIcon aria-hidden="true" />
+            <span>Slides</span>
+          {/if}
+        </button>
+        <button
+          type="button"
+          class="docs-display-copy-button"
+          aria-label="Copy display markdown"
+          title="Copy display markdown"
+          disabled={!renderedDisplayMarkdown.trim()}
+          onclick={() => void onCopyRenderedMarkdown()}
+        >
+          <ClipboardIcon aria-hidden="true" />
+        </button>
+      {/if}
+    {/if}
+    {#if saving}
+      <span class="docs-save-status" aria-live="polite">Saving…</span>
+    {/if}
+    {#if onImportAnkiPackage}
+      <label
+        class="docs-import-anki-button"
+        aria-label="Import Anki package"
+        title="Import Anki package"
+      >
+        <UploadIcon aria-hidden="true" />
+        <input
+          class="docs-import-anki-input"
+          type="file"
+          accept=".apkg,application/octet-stream"
+          aria-label="Anki package file"
+          disabled={saving}
+          onchange={(event) => {
+            const input = event.currentTarget;
+            if (!(input instanceof HTMLInputElement)) return;
+            const file = input.files?.[0];
+            input.value = "";
+            if (file) void onImportAnkiPackage?.(file);
+          }}
+        />
+      </label>
+    {/if}
+    {#if activePanel === "cards" && !yamlMode && !previewMode}
+      <button type="button" disabled={!draftNote} onclick={onAddCard}>
+        <PlusIcon />
+        Add card
+      </button>
+    {/if}
+    <button
+      type="button"
+      disabled={!draftNote}
+      aria-label="Delete note"
+      onclick={onDeleteNote}
+    >
+      <Trash2Icon />
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+import type { DocsNote, DocsNotePanel } from '../model';
+import type { DisplayMode } from "./docs-workspace-helpers";
+type $$ComponentProps = {
+    draftNote: DocsNote | null;
+    filenameDraft: string;
+    yamlMode?: boolean;
+    saving?: boolean;
+    activePanel: DocsNotePanel;
+    previewMode?: boolean;
+    showCollapseAll?: boolean;
+    hasCollapsedSections?: boolean;
+    collapseAllDisabled?: boolean;
+    displayMode?: DisplayMode;
+    renderedDisplayMarkdown?: string;
+    onCommitFilename: () => void | Promise<void>;
+    onYamlModeChange: (enabled: boolean) => void;
+    onPanelChange: (panel: DocsNotePanel) => void;
+    onPreviewModeChange?: (enabled: boolean) => void;
+    onToggleAllSections?: () => void;
+    onAddCard: () => void;
+    onImportAnkiPackage?: (file: File) => void | Promise<void>;
+    onCopyRenderedMarkdown?: () => void | Promise<void>;
+    onDeleteNote: () => void | Promise<void>;
+};
+declare const DocsWorkspaceToolbar: import("svelte").Component<$$ComponentProps, {}, "displayMode" | "filenameDraft">;
+type DocsWorkspaceToolbar = ReturnType<typeof DocsWorkspaceToolbar>;
+export default DocsWorkspaceToolbar;

package/dist/docs/candidates/ChoiceMenu.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	/**
+	 * DESIGN_CORE_CANDIDATE: ChoiceMenu — ported for Docs; promote to design-core/forms later.
+	 */
+  let {
+    value,
+    options,
+    labels = {},
+    ariaLabel,
+    onChange = () => {},
+  }: {
+    value: string;
+    options: string[];
+    labels?: Record<string, string>;
+    ariaLabel: string;
+    onChange?: (value: string) => void;
+  } = $props();
+</script>
+
+<details class="cv-form-choice-menu">
+  <summary aria-label={ariaLabel}>{labels[value] ?? value}</summary>
+  <div>
+    {#each options as option (option)}
+      <button
+        type="button"
+        class:active={value === option}
+        onclick={(event) => {
+          onChange(option);
+          const details = event.currentTarget.closest("details");
+          if (details) details.open = false;
+        }}
+      >
+        {labels[option] ?? option}
+      </button>
+    {/each}
+  </div>
+</details>
+
+<style>
+  .cv-form-choice-menu {
+    position: relative;
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .cv-form-choice-menu summary {
+    display: inline-flex;
+    min-height: 1.65rem;
+    align-items: center;
+    border: 1px solid var(--cv-form-border, var(--kanban-border, var(--border)));
+    border-radius: 999px;
+    color: var(--cv-form-muted, var(--kanban-muted, var(--muted-foreground)));
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 650;
+    list-style: none;
+    padding: 0 0.75rem;
+  }
+
+  .cv-form-choice-menu summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .cv-form-choice-menu summary:hover,
+  .cv-form-choice-menu summary:focus-visible {
+    color: var(
+      --cv-form-foreground,
+      var(--kanban-foreground, var(--foreground))
+    );
+    outline: 0;
+  }
+
+  .cv-form-choice-menu > div {
+    position: absolute;
+    top: calc(100% + 0.3rem);
+    right: 0;
+    z-index: 30;
+    display: grid;
+    min-width: 10rem;
+    gap: 0.15rem;
+    border: 1px solid var(--cv-form-border, var(--kanban-border, var(--border)));
+    border-radius: 0.4rem;
+    background: var(--cv-form-popover, var(--kanban-card, var(--popover)));
+    box-shadow: 0 1rem 2rem
+      var(--cv-form-shadow, var(--kanban-shadow, rgb(15 23 42 / 12%)));
+    padding: 0.35rem;
+  }
+
+  .cv-form-choice-menu button {
+    min-height: 1.75rem;
+    border: 0;
+    border-radius: 0.25rem;
+    background: transparent;
+    color: var(
+      --cv-form-foreground,
+      var(--kanban-foreground, var(--foreground))
+    );
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.8rem;
+    text-align: left;
+    padding: 0 0.5rem;
+  }
+
+  .cv-form-choice-menu button:hover,
+  .cv-form-choice-menu button:focus-visible,
+  .cv-form-choice-menu button.active {
+    background: var(
+      --cv-form-selection,
+      color-mix(in srgb, var(--card-color, var(--primary)) 12%, transparent)
+    );
+    outline: 0;
+  }
+</style>

package/dist/docs/candidates/ChoiceMenu.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value: string;
+    options: string[];
+    labels?: Record<string, string>;
+    ariaLabel: string;
+    onChange?: (value: string) => void;
+};
+declare const ChoiceMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChoiceMenu = ReturnType<typeof ChoiceMenu>;
+export default ChoiceMenu;