@lapis-notes/api 0.1.0

package/dist/components/editor/editor.css

@@ -0,0 +1,565 @@
+/* Editor layout chrome + search panel + lint tooltip (not CodeMirror internals) */
+
+/*
+ * Obsidian theme intake keeps Mira palette, with light-mode syntax tokens
+ * nudged to WCAG AA (≥ 4.5:1) against the editor background for Storybook axe.
+ */
+[data-ui-component="editor"][data-mira-theme~="obsidian"] {
+  --mira-syntax-string: light-dark(#007a56, #53dfdd);
+  --mira-syntax-property: light-dark(#c22e75, #fa99cd);
+  --mira-syntax-number: light-dark(#8f4a00, #e9973f);
+}
+
+[data-ui-component="editor"] {
+  --ui-editor-search-pad-x: 1rem;
+  --ui-editor-search-pad-y: 0.5rem;
+  --ui-editor-search-gap: 0.5rem;
+  --ui-editor-search-input-height: var(
+    --input-height,
+    var(--ui-control-height, 2rem)
+  );
+  --ui-editor-lint-min-width: 360px;
+  --ui-editor-lint-max-width: min(720px, calc(100vw - 48px));
+  --ui-editor-lint-radius: var(--radius, 0.375rem);
+  --ui-editor-lint-accent: var(--text-accent, var(--primary));
+  --ui-editor-inline-problem-accent: var(
+    --ui-workspace-diagnostic-warning,
+    var(--warning, #d97706)
+  );
+  --ui-editor-inline-problem-background: var(
+    --ui-workspace-view-background,
+    var(--background, #fff)
+  );
+  --ui-editor-inline-problem-foreground: var(
+    --ui-workspace-view-foreground,
+    var(--foreground, #111827)
+  );
+  --ui-editor-inline-problem-muted-foreground: var(
+    --ui-workspace-muted-foreground,
+    var(--muted-foreground, #64748b)
+  );
+  --ui-editor-inline-problem-border: var(
+    --ui-workspace-border,
+    var(--border, #e5e7eb)
+  );
+  --ui-editor-font-mono: var(
+    --font-mono,
+    var(--mira-font-mono, ui-monospace, monospace)
+  );
+  --ui-editor-font-sans: var(--font-sans, var(--mira-font-sans, inherit));
+  /* Note column: shared by inline title + source body (Mira/Lapis file margins). */
+  --ui-editor-file-margins-y: var(
+    --file-margins-y,
+    var(--mira-editor-padding, 2rem)
+  );
+  --ui-editor-file-margins-x: var(
+    --file-margins-x,
+    var(--mira-editor-padding, 2rem)
+  );
+  --ui-editor-file-line-width: var(--file-line-width, 700px);
+  /* Filename title: public tokens + Obsidian-era / heading aliases */
+  --ui-editor-inline-title-color: var(
+    --inline-title-color,
+    var(--h1-color, var(--mira-h1-color, var(--foreground, inherit)))
+  );
+  --ui-editor-inline-title-font: var(
+    --inline-title-font,
+    var(--h1-font, var(--mira-h1-font, var(--font-sans, inherit)))
+  );
+  --ui-editor-inline-title-line-height: var(
+    --inline-title-line-height,
+    var(--h1-line-height, var(--mira-h1-line-height, 1.2))
+  );
+  --ui-editor-inline-title-size: var(
+    --inline-title-size,
+    var(--h1-size, var(--mira-h1-size, 1.802em))
+  );
+  --ui-editor-inline-title-style: var(
+    --inline-title-style,
+    var(--h1-style, var(--mira-h1-style, normal))
+  );
+  --ui-editor-inline-title-variant: var(
+    --inline-title-variant,
+    var(--h1-variant, var(--mira-h1-variant, normal))
+  );
+  --ui-editor-inline-title-weight: var(
+    --inline-title-weight,
+    var(--h1-weight, var(--mira-h1-weight, 700))
+  );
+  --ui-editor-inline-title-margin-bottom: var(
+    --inline-title-margin-bottom,
+    0.5em
+  );
+  --ui-editor-inline-title-letter-spacing: -0.015em;
+}
+
+/*
+ * Inline title is a sibling of the CM host inside `.cm-sizer` (same as full
+ * lapis) — not a CodeMirror WidgetType. The sizer owns readable-column
+ * padding so the filename and body share one note column; Mira's scroller
+ * padding is zeroed below to avoid a second, separate inset.
+ */
+[data-ui-component="editor"] .inline-title,
+[data-ui-component="editor"] .cm-editor-inline-title {
+  color: var(--ui-editor-inline-title-color);
+  font-family: var(--ui-editor-inline-title-font);
+  font-size: var(--ui-editor-inline-title-size);
+  font-style: var(--ui-editor-inline-title-style);
+  font-variant: var(--ui-editor-inline-title-variant);
+  font-weight: var(--ui-editor-inline-title-weight);
+  letter-spacing: var(--ui-editor-inline-title-letter-spacing);
+  line-height: var(--ui-editor-inline-title-line-height);
+  margin-block-end: var(--ui-editor-inline-title-margin-bottom);
+  width: 100%;
+  white-space: pre-wrap;
+  border: none;
+  outline: none;
+}
+
+[data-ui-component="editor"]
+  .cm-editor-inline-title[data-mobile-inline-title="true"] {
+  text-align: center;
+}
+
+.cm-editor-scroll-area {
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+}
+
+.cm-editor-scroll-area
+  > [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-orientation="vertical"] {
+  /* Keep the editor thumb fully pointer-reachable above an adjacent workspace
+     resize rail, matching the shared Explorer scroll-area integration. */
+  z-index: 11;
+}
+
+.cm-editor-scroll-area--ancestor {
+  height: auto;
+  overflow: visible;
+}
+
+.cm-editor-scroll-area--ancestor .cm-editor-scroll-area-content,
+.cm-editor-scroll-area--ancestor .cm-editor-scroll-area-inner,
+.cm-editor-scroll-area--ancestor .cm-editor-scroll-area-inner > .cm-scroller {
+  height: auto;
+  min-height: 0;
+}
+
+[data-ui-component="editor"][data-ui-part="scroll-content"],
+[data-ui-component="editor"] .cm-editor-scroll-area-content {
+  height: fit-content;
+  min-height: 100%;
+  padding-block-start: 0;
+}
+
+[data-ui-component="editor"][data-ui-part="scroll-inner"],
+[data-ui-component="editor"] .cm-editor-scroll-area-inner,
+[data-ui-component="editor"] .cm-editor-scroll-area-inner > .cm-scroller {
+  height: 100%;
+}
+
+[data-ui-component="editor"][data-ui-part="scroll-inner"]
+  > .cm-scroller
+  > .cm-sizer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: none;
+  min-height: 100%;
+  height: auto;
+  margin-inline: 0;
+  padding-block: var(--ui-editor-file-margins-y);
+  padding-inline: max(
+    var(--ui-editor-file-margins-x),
+    calc((100% - var(--ui-editor-file-line-width)) / 2)
+  );
+}
+
+[data-ui-component="editor"] .cm-editor-content,
+[data-ui-component="editor"] .cm-editor-content > .cm-editor {
+  height: auto;
+  min-height: 0;
+  width: 100%;
+}
+
+/*
+ * Mira theme pads `& > .cm-scroller`; host column already owns those margins.
+ * Keep both axes non-scrolling so the outer design-core ScrollArea remains the
+ * sole vertical owner. `clip` is intentional: pairing `hidden` with a visible
+ * y-axis would make CSS compute overflow-y to `auto` and paint a second track.
+ */
+[data-ui-component="editor"][data-ui-part="scroll-content"]
+  .cm-editor-content
+  > .cm-editor
+  > .cm-scroller {
+  box-sizing: border-box;
+  height: auto;
+  min-height: 0;
+  overflow-x: clip;
+  overflow-y: visible;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+[data-ui-component="editor"] .cm-editor-source {
+  padding-block-end: 50svh;
+}
+
+/*
+ * Default face is Mira monospace. Markdown and plain text opt into sans via
+ * the CodeMirror host `data-language` attribute from markupEditor().
+ */
+[data-ui-component="editor"] .cm-editor.cm-editor-source > .cm-scroller {
+  font-family: var(
+    --ui-editor-font-mono,
+    var(--font-mono, var(--mira-font-mono, ui-monospace, monospace))
+  );
+}
+
+[data-ui-component="editor"]
+  .cm-editor.cm-editor-source[data-language="markdown"]
+  > .cm-scroller,
+[data-ui-component="editor"]
+  .cm-editor.cm-editor-source[data-language="text"]
+  > .cm-scroller {
+  font-family: var(
+    --ui-editor-font-sans,
+    var(--font-sans, var(--mira-font-sans, inherit))
+  );
+}
+
+/* Non-Markdown languages use the configured gutter; Mira Markdown owns its
+ * inline fold controls and suppresses the duplicate gutter presentation. */
+[data-ui-component="editor"]
+  .cm-editor:not([data-language="markdown"])
+  .cm-gutter.cm-foldGutter {
+  display: flex;
+}
+
+[data-ui-component="editor"]
+  .cm-editor[data-language="markdown"]
+  .cm-gutter.cm-foldGutter {
+  display: none !important;
+}
+
+[data-ui-component="editor"] .cm-editor .cm-foldGutter .cm-gutterElement {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+[data-ui-component="editor"] .cm-editor .cm-gutterElement .collapse-icon {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  cursor: pointer;
+}
+
+[data-ui-component="editor"] .collapse-icon svg.svg-icon {
+  width: 10px;
+  height: 10px;
+  stroke-width: 4px;
+  color: var(--text-accent, var(--mira-accent, var(--primary)));
+  transition: transform 100ms ease-in-out;
+}
+
+[data-ui-component="editor"] .cm-editor .cm-foldPlaceholder {
+  margin-inline-start: 0.5rem;
+  border: none;
+  color: var(--muted-foreground, var(--mira-muted-foreground));
+  background: transparent;
+  user-select: none;
+}
+
+[data-ui-component="editor"] .cm-line-block {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+[data-ui-component="editor"][data-ui-part="search-root"] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-inline: var(--ui-editor-search-pad-x);
+  padding-block: var(--ui-editor-search-pad-y);
+  background: var(--background);
+  color: var(--foreground);
+}
+
+[data-ui-component="editor"][data-ui-part="search-toggle"] {
+  border: none;
+}
+
+[data-ui-component="editor"][data-ui-part="search-toggle"]:hover {
+  border: none;
+}
+
+[data-ui-component="editor"][data-ui-part="search-icon"],
+[data-ui-component="editor"] .editor-search-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+[data-ui-component="editor"][data-ui-part="search-row"] {
+  display: flex;
+  align-items: center;
+}
+
+[data-ui-component="editor"][data-ui-part="search-toggle-wrap"] {
+  padding: 0.25rem;
+}
+
+[data-ui-component="editor"][data-ui-part="search-fields"] {
+  width: 100%;
+}
+
+[data-ui-component="editor"][data-ui-part="search-field-row"] {
+  display: flex;
+  width: 100%;
+  gap: var(--ui-editor-search-gap);
+  margin-inline: auto;
+  padding-block: 0.5rem;
+}
+
+[data-ui-component="editor"][data-ui-part="search-input"],
+[data-ui-component="editor"] .editor-search-input {
+  height: var(--ui-editor-search-input-height);
+}
+
+[data-ui-component="editor"][data-ui-part="search-input"]:focus-visible,
+[data-ui-component="editor"] .editor-search-input:focus-visible {
+  box-shadow: 0 0 0 2px var(--ring, var(--primary));
+}
+
+[data-ui-component="editor"][data-ui-part="lint-tooltip"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: var(--ui-editor-lint-min-width);
+  max-width: var(--ui-editor-lint-max-width);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--ui-editor-lint-radius);
+  background: var(--secondary);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+[data-ui-component="editor"][data-ui-part="lint-message-band"] {
+  position: relative;
+  padding: 0.375rem 0.5rem;
+  background: var(--secondary);
+}
+
+[data-ui-component="editor"][data-ui-part="lint-message-row"] {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-message-text"] {
+  min-width: 0;
+  font-family: var(--ui-editor-font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  white-space: pre-wrap;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-rule"] {
+  font: inherit;
+  color: var(--ui-editor-lint-accent);
+  text-underline-offset: 2px;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-rule"]:hover {
+  text-decoration: underline;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-copy"] {
+  margin-inline-start: 0.125rem;
+  color: var(--muted-foreground);
+  opacity: 0.65;
+  transition: opacity 150ms ease;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-tooltip"]:hover
+  [data-ui-part="lint-copy"] {
+  opacity: 1;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-copy"]:focus-visible {
+  opacity: 1;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-copy"]:hover {
+  color: var(--foreground);
+}
+
+[data-ui-component="editor"][data-ui-part="lint-source"] {
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="editor"][data-ui-part="lint-footer"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.75rem;
+  row-gap: 0.25rem;
+  border-top: 1px solid var(--border);
+  padding-block: 0.375rem;
+  padding-inline: 1rem 0.75rem;
+  background: color-mix(in srgb, var(--secondary) 82%, var(--foreground) 8%);
+}
+
+[data-ui-component="editor"][data-ui-part="lint-action"],
+[data-ui-component="editor"][data-ui-part="lint-quick-fix"] {
+  height: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--foreground);
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+[data-ui-component="editor"][data-ui-part="lint-action"]:hover,
+[data-ui-component="editor"][data-ui-part="lint-quick-fix"]:hover,
+[data-ui-component="editor"][data-ui-part="lint-quick-fix"][data-state="open"] {
+  color: var(--ui-editor-lint-accent);
+  text-decoration: underline;
+}
+
+/* Inline diagnostic expansion created by the lint tooltip's View Problem action. */
+[data-ui-component="editor"][data-ui-part="inline-problem"] {
+  position: relative;
+  box-sizing: border-box;
+  width: min(720px, var(--lapis-inline-problem-max-width, calc(100vw - 96px)));
+  border-left: 2px solid var(--ui-editor-inline-problem-accent);
+  color: var(--ui-editor-inline-problem-foreground);
+  background: var(--ui-editor-inline-problem-background);
+  font-family: var(--ui-editor-font-sans);
+  font-size: 0.875rem;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-pointer"] {
+  position: absolute;
+  top: -5px;
+  left: calc(var(--lapis-inline-problem-pointer-left, 0px) + 0.75rem);
+  width: 0;
+  height: 0;
+  border-inline: 5px solid transparent;
+  border-bottom: 5px solid var(--ui-editor-inline-problem-accent);
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 0.25rem 0.75rem;
+  background: color-mix(
+    in srgb,
+    var(--ui-editor-inline-problem-accent) 12%,
+    var(--ui-editor-inline-problem-background)
+  );
+}
+
+:is(.dark, .theme-dark, [data-ui-theme="lapis"].dark)
+  [data-ui-component="editor"][data-ui-part="inline-problem-header"] {
+  background: color-mix(
+    in srgb,
+    var(--ui-editor-inline-problem-accent) 18%,
+    var(--ui-editor-inline-problem-background)
+  );
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-title"] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 500;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-icon"] {
+  color: var(--ui-editor-inline-problem-accent);
+  font-size: 0.875rem;
+  line-height: 1;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-label"] {
+  color: var(--ui-editor-inline-problem-foreground);
+  font-size: 0.875rem;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-close"] {
+  padding: 0.125rem 0.25rem;
+  border: 0;
+  border-radius: 0.25rem;
+  color: var(--ui-editor-inline-problem-muted-foreground);
+  background: transparent;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color 120ms ease,
+    background-color 120ms ease;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-close"]:hover {
+  color: var(--ui-editor-inline-problem-foreground);
+  background: color-mix(
+    in srgb,
+    var(--ui-editor-inline-problem-accent) 12%,
+    transparent
+  );
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-close"]:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring, var(--ring, currentColor));
+  outline-offset: 1px;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-body"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid
+    color-mix(
+      in srgb,
+      var(--ui-editor-inline-problem-accent) 25%,
+      var(--ui-editor-inline-problem-border)
+    );
+  background: var(--ui-editor-inline-problem-background);
+  font-family: var(--ui-editor-font-mono);
+  font-size: 0.875rem;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-message"] {
+  color: var(--ui-editor-inline-problem-foreground);
+  white-space: pre-wrap;
+}
+
+[data-ui-component="editor"][data-ui-part="inline-problem-source"] {
+  flex-shrink: 0;
+  color: var(--ui-editor-inline-problem-muted-foreground);
+  font-family: var(--ui-editor-font-mono);
+  font-size: 0.75rem;
+}

package/dist/components/editor/editor.d.ts

@@ -0,0 +1,33 @@
+import { Compartment, type Extension } from "@codemirror/state";
+import { EditorView, GutterMarker } from "@codemirror/view";
+import type { App } from "../../context.svelte";
+export declare class BlockLineMarker extends GutterMarker {
+    readonly from: number;
+    readonly to: number;
+    constructor(from: number, to: number);
+    eq(other: BlockLineMarker): boolean;
+    toDOM(): HTMLDivElement;
+}
+export declare class EditorConfig {
+    readonly configs: Record<string, {
+        config: Compartment;
+        controller: (value: any, app: App) => Extension | null;
+    }>;
+    register<T>(key: string, controller: (value: T, app: App) => Extension | null): void;
+    has(key: string): boolean;
+    extension(application?: App): Extension;
+    update<T>(view: EditorView, key: string, value?: T, application?: App): void;
+}
+export type MarkupEditorOptions = {
+    /** Stable language id written to the CM host as `data-language`. */
+    language?: string;
+    /** Application that owns the editor configuration. */
+    app?: App;
+};
+/**
+ * Source-editor CodeMirror shell backed by Mira base extensions + Lapis live
+ * configuration compartments. Language packs are passed in by the caller;
+ * Markdown live-preview / rich Mira surfaces are not included.
+ */
+export declare function markupEditor(options?: MarkupEditorOptions, ...extensions: Extension[]): Extension;
+export declare const editorConfig: EditorConfig;