slidev-theme-kotlin 0.13.0 → 0.13.2

package/CHANGELOG.md

@@ -2,12 +2,38 @@
 
 ## Unreleased
 
+### Added
+
+- An `arrow` modifier on a Kotlin fence, `` ```kotlin arrow ``, marks the code window with the [Arrow](https://arrow-kt.io) brand icon and outlines it in Arrow blue (`--code-window-arrow-color`, light `#2455cf`, dark `#497bf7`), next to the existing `gradle`, `jdbc`, and `r2dbc` modifiers. It is for slides whose Kotlin is really about `Raise`, `Resource`, `SuspendApp`, or another Arrow library; plain Kotlin keeps the Kotlin mark.
+- A `ktor` modifier, `` ```kotlin ktor ``, marks the code window with the Ktor icon and outlines it in Ktor purple (`--code-window-ktor-color`, light `#7f52ff`, dark `#a578ff`), for Ktor routing, plugin, and client code.
+
+### Changed
+
+- `TypeHint` draws its `this: …` and `context(…)` pill as an inlay attached to the matched token even when the `{` ends its line, instead of a floating message. A floating message hides while Magic Move runs; the inlay travels with its token and stays visible through the transition. The pill still pushes trailing code to the right as it did.
+
+### Fixed
+
+- Explicit `:connect="true"` creates an editable connector from matched text even with no label, target, or saved geometry. Empty labels are supported too.
+
+- `DrawnAnnotation` renders and edits an explicit `geometry.connector` without a `label` or `target`, including curved lines and arrowheads.
+
+## 0.13.1
+
+### Added
+
+- `InlineCompilerError` accepts a line range, `line="3-6"`, to underline a multi-line declaration. The indentation after a `\n` in `text` is now optional for every component that matches code text (`InlineCompilerError`, `DrawnAnnotation`, `SmartCast`, `Warning`, `TypeHint`, `InlineValue`). A multi-line diagnostic squiggles each line from its code instead of from column 0, and its message sits after the last line of the match instead of the first.
+- `TypeHint` takes `type` for IntelliJ's other inlay, the inferred type of a declaration: `<TypeHint :line="2" text="customer" type="Column<String>">` draws the grey `: Column<String>` pill right after `customer`, inside the line, so `by column { … }` moves right as it does in the IDE. It is for `val x by …` and other declarations whose type the code does not spell out. The pill is `::after` content of the matched token (a new `inlay` option on `code-highlight.ts` sets `data-code-inlay` on the match's last element), so it follows Magic Move with the token and never enters the text other components search. The handout renders it as `customer: Column<String>`.
+
+- A `// Solution` marker for exercise slides, next to `// Example`. Everything above it folds off the slide the same way and the Kotlin snippet CLI compiles it with the code below, so the assertions an exercise slide shows are checked against a real answer. Unlike an `// Example` prefix, the solution never reaches the handout or `llms-full.txt`: `parseFenceBlock` prints the fence from the marker down, keeping only the solution's `import` lines so the symbols still resolve for a reader. `withoutSolution` in `code-imports.ts` does the cut, and `SplitImports.solution` reports which marker folded.
+
 ### Removed
 
 - The three Kotlin logo files under `public/`: nothing in the theme referenced them, and the README no longer lists them as a feature.
 
 ### Fixed
 
+- Java snippet filenames recognize indented public top-level types while ignoring nested declarations, comments, and string literals.
+- The Kotlin snippet CLI wraps a positional `val [a, b] = pair` in `main()` like it does `val (a, b) = pair`: the square-bracket form of `-Xname-based-destructuring` is just as illegal at top level, but the generator kept it there and the deck's build failed with "Destructuring declarations are only allowed for local variables/values".
 - The text on `cover` and `intro` slides no longer runs under the featured Kodee: the layouts keep it in a column of `--cover-text-width` (48% of the content box by default, clear of the mascot's arm) and wrap it there. The showcase's own cover subtitle, intro bullets, and closing title had been partly hidden behind the mascot since the deck was written. A deck widens the column from its stylesheet, or sets `100%` on the class of a slide that hides the mascot.
 - `SmartCast` and `Warning` follow the colour scheme: in dark mode the token background is Darcula's smart-cast green (`#294436`) and warning olive (`#52503a`) instead of the IntelliJ Light tints, which left Darcula's grey code nearly unreadable on a pastel bar, and the messages brighten to `#7bc47f` and `#d4b44a`. The same variables (`--smart-cast-color`, `--warning-color`, and the `-message-color` pair) still override both schemes, as `TypeHint` already did.
 

package/README.md

@@ -117,7 +117,11 @@ SELECT * FROM presentations;
 ````
 
 `kotlin`, `kt`, and `kts` use the Kotlin icon; each with a `gradle`, `jdbc`,
-or `r2dbc` modifier uses the Gradle, JDBC, or R2DBC identity respectively.
+or `r2dbc` modifier uses the Gradle, JDBC, or R2DBC identity respectively, and
+with an `arrow` modifier the [Arrow](https://arrow-kt.io) icon, for Kotlin
+code that is really about `Raise`, `Resource`, or another Arrow library.
+Use `kotlin ktor` (also `kt ktor` or `kts ktor`) for the Ktor icon and purple
+border on Ktor code. These modifiers also work with Magic Move.
 `yaml toolchain`, `java`, `bash`, `xml maven`, and `sql` use the Amper, Java,
 Terminal, Maven, and PostgreSQL icons respectively. All other fences remain plain
 code surfaces.
@@ -153,6 +157,8 @@ value:
   --code-window-kotlin-color: #834df0;
   --code-window-gradle-color: #6c707e;
   --code-window-amper-color: #087cfa;
+  --code-window-arrow-color: #2455cf;
+  --code-window-ktor-color: #7f52ff;
   --code-window-java-color: #e66d17;
   --code-window-terminal-color: #6c707e;
   --code-window-maven-color: #3574f0;
@@ -214,13 +220,31 @@ The window shows `fun doubled()…`. The comment is ordinary Kotlin, so the
 fence still compiles as written (see the snippet checker below), and the
 handout keeps it. A description after the colon is optional.
 
+An exercise slide shows the assertions and hides the answer. Put the answer
+above a `// Solution` comment instead: it folds exactly like `// Example`,
+the snippet checker compiles the assertions against it, but the handout and
+`llms-full.txt` print the fence without it (only its `import` lines survive,
+so a reader can still resolve the symbols), and nothing on the slide can
+reveal it:
+
+````md
+```kotlin
+fun Int.isEven(): Boolean = this % 2 == 0
+
+// Solution
+check(4.isEven())
+check(!7.isEven())
+```
+````
+
 Details:
 
 - Kotlin, Java, and Scala fences (`kotlin`, `kt`, `kts`, `java`, `scala`)
   fold. Without a marker, only a block of `import` lines at the top of the
   fence counts, and a `package` line or `@file:` annotation before it stays
   visible. With a marker, everything above it folds. Only the first
-  `// Example` line in a fence counts, and only when there is code above it.
+  `// Example` or `// Solution` line in a fence counts, and only when there
+  is code above it.
 - Line numbers, `{1|2-3}` highlight ranges, and annotation targets all
   count from the first line of real code, so folding never shifts them.
 - Cross-slide Magic Move chains and classic ````md magic-move```` blocks fold

package/assets/code-window/arrow.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 41L20 0V30L0 41Z" fill="#2455CF"/>
+<path d="M40 41L20 0V30L40 41Z" fill="#497BF7"/>
+<path d="M20 37L13.9766 33.3086L20 30L26 33.2969L20 37Z" fill="#E88D15"/>
+<path d="M26 33.2969L20 37V30L26 33.2969Z" fill="#FAA73A"/>
+</svg>

package/assets/code-window/ktor.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.9995 31.9981L31.9975 48.0001L0 15.996L16.002 0L47.9995 31.9981Z" fill="url(#paint0_linear_1328_4995)"/>
+<path d="M32.0103 15.9961H16.0083V31.9981H32.0103V15.9961Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_1328_4995" x1="5.51834" y1="21.4563" x2="26.1201" y2="42.1597" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7F52FF"/>
+<stop offset="0.506725" stop-color="#C711E1"/>
+<stop offset="1" stop-color="#FF6D3F"/>
+</linearGradient>
+</defs>
+</svg>

package/components/DrawnAnnotation.vue

@@ -390,7 +390,7 @@ const transitionInkIdentity = computed(() => JSON.stringify([
 ]))
 // A source-only mark exposes no visual-editor operation. It remains valid:
 // only labels and connectors have geometry that an editor can manipulate.
-const editorRelevant = computed(() => hasLabel.value || (connect.value && hasTarget.value))
+const editorRelevant = computed(() => hasLabel.value || (connect.value && (hasTarget.value || props.connect === true || !!manualConnector())))
 
 if (props.on !== undefined && (props.at !== undefined || props.until !== undefined))
   warn('`on` is `at` and `until` in one, so the separate `at` / `until` given here are ignored. Use either `on` alone, or `at` and `until`.')
@@ -592,7 +592,7 @@ const LABEL_HEAD_START = 0.1
 const LABEL_FADE_DURATION = 250
 
 // Whether a leader line is drawn at all: it needs somewhere to go.
-const connectsLine = computed(() => connect.value && (hasTarget.value || hasLabel.value))
+const connectsLine = computed(() => connect.value && (hasTarget.value || hasLabel.value || props.connect === true || !!manualConnector()))
 const hasTargetStage = computed(() => hasTarget.value && targetMarkType.value !== 'none')
 
 // A label that waits for a click of its own starts writing straight away. One
@@ -1289,7 +1289,10 @@ function measureGeometry(root: HTMLElement, overlayBox: DOMRect, width: number,
     ? Array.from(match.range.getClientRects()).filter(rect => rect.width > 0.5 && rect.height > 0.5)
     : source
       ? [source.getBoundingClientRect()]
-      : []
+      // A geometry-only line needs a canvas, but no source element to mark.
+      : sourceMarkType.value === 'none' && !props.text && props.selector === '[data-annotate]' && manualConnector()
+        ? [root.getBoundingClientRect()]
+        : []
 
   if (!rects.length) {
     // The text is not on the slide right now — a Magic Move step that does not
@@ -1541,10 +1544,22 @@ function paintDestinationInto(
     placedLabelRegistry.delete(placementToken)
   }
 
-  if (!destination || !connect.value)
-    return
-
+  // Explicitly enabling a connector also works without a label or target.
+  // Seed a short route from the mark; dragging materializes its endpoints in
+  // geometry.connector through the same editor path as labelled connectors.
   const savedConnector = manualConnector()
+  if (!destination && !savedConnector && props.connect === true) {
+    const slide = slideRoot()
+    const bounds = toLocal(slide ? slideRect(slide) : root.getBoundingClientRect())
+    const distance = Math.max(28, props.gap * 2)
+    const x = clamp(markBox.cx + (markBox.cx < bounds.cx ? distance : -distance), bounds.left + 8, bounds.right - 8)
+    const y = markBox.cy < bounds.cy
+      ? Math.min(markBox.bottom + distance, bounds.bottom - 8)
+      : Math.max(markBox.top - distance, bounds.top + 8)
+    destination = makeBox(x, y, x, y)
+  }
+  if (!connect.value || (!destination && !savedConnector))
+    return
   let start: Point
   let end: Point
   let c2x: number
@@ -1575,6 +1590,8 @@ function paintDestinationInto(
     }
   }
   else {
+    if (!destination)
+      return
     const route = routeLeader(markBox, destination, endPoint)
     if (!route)
       return

package/components/InlineCompilerError.vue

@@ -4,7 +4,7 @@ import type { TextMatch } from './code-text-match'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useId, useTemplateRef, watch } from 'vue'
 import { useIsSlideActive, useNav, useSlideContext } from '@slidev/client'
 import { useMutationObserver, useResizeObserver } from '@vueuse/core'
-import { codeTextSegments, findTextInSegments, mergeVisualLines, trimmedLineRange } from './code-text-match'
+import { codeTextSegments, findTextInSegments, lineSpanMatch, mergeVisualLines, trimmedLineRange } from './code-text-match'
 import { normalizeAnnotationLineBreaks } from './annotation-line-breaks'
 import { annotationLabelText, renderAnnotationLabel } from './annotation-label-markdown'
 import { rememberTransitionInk, takeTransitionInk } from './transition-ink'
@@ -19,15 +19,16 @@ const isDevelopment = import.meta.env.MODE === 'development'
 const props = defineProps<{
   /**
    * One-based source line number inside the single fenced code block this
-   * component wraps. Alone, it underlines that line's code. With `text`, it
-   * narrows the search to that line — the first line of the match when `text`
-   * spans several.
+   * component wraps, or an inclusive range such as `"3-6"`. Alone, it
+   * underlines the code of that line or those lines. With `text`, it narrows
+   * the search to the lines starting at the first one.
    */
-  line?: number
+  line?: number | string
   /**
    * Exact rendered code text to underline. `\\n` (or a literal newline in a
-   * bound string) continues the match on the next source line; every line the
-   * match covers gets its own squiggle.
+   * bound string) continues the match on the next source line, whose
+   * indentation may be left out; every line the match covers gets its own
+   * squiggle.
    */
   text?: string
   /** Which occurrence of `text` to underline, 1-based. */
@@ -55,6 +56,19 @@ const props = defineProps<{
 const messageHtml = computed(() => renderAnnotationLabel(props.message))
 const messageText = computed(() => annotationLabelText(props.message))
 const text = computed(() => props.text === undefined ? undefined : normalizeAnnotationLineBreaks(props.text))
+// `line` is one line (`:line="3"`, `line="3"`) or an inclusive range
+// (`line="3-6"`). Null marks a value that is neither.
+const lineSpan = computed<{ from: number, to: number } | null | undefined>(() => {
+  const line = props.line
+  if (line === undefined)
+    return undefined
+  const match = /^\s*(\d+)\s*(?:[-–]\s*(\d+)\s*)?$/.exec(String(line))
+  if (!match)
+    return null
+  const from = Number(match[1])
+  const to = match[2] === undefined ? from : Number(match[2])
+  return from >= 1 && to >= from ? { from, to } : null
+})
 
 const slideContext = useSlideContext()
 const { $clicksContext, $clicks, $scale, $zoom } = slideContext
@@ -276,7 +290,7 @@ function requestedOccurrence() {
  * container — is never trusted either way.
  */
 interface ResolvedTarget extends TextMatch {
-  /** The code of the line the match starts on: the message sits after it. */
+  /** The code of the line the match ends on: the message sits after it. */
   lineRange: Range | null
   startNode?: Node
   endNode?: Node
@@ -310,26 +324,27 @@ function resolveTarget(host: HTMLElement): ResolvedTarget {
 }
 
 function searchTarget(code: HTMLElement): ResolvedTarget {
-  const line = props.line
-  if (line !== undefined && (!Number.isInteger(line) || line < 1))
+  const span = lineSpan.value
+  if (span === null)
     return NO_TARGET
   const needle = text.value
-  if (needle === '' || (needle === undefined && line === undefined))
+  if (needle === '' || (needle === undefined && span === undefined))
     return NO_TARGET
 
   const segments = codeTextSegments(code, isMagicMove)
   const match: TextMatch = needle === undefined
-    ? { ...trimmedLineRange(segments, line!), matches: 0, line }
-    : findTextInSegments(segments, needle, requestedOccurrence(), line)
+    ? lineSpanMatch(segments, span!.from, span!.to)
+    : findTextInSegments(segments, needle, requestedOccurrence(), span?.from)
   if (!match.range)
     return { ...match, lineRange: null }
 
   // The squiggle follows only the exact offending text, but placing the
   // diagnostic immediately after that text would cover the remainder of its
   // source line. The message is anchored after the line's final
-  // non-whitespace token instead, on the line the match starts.
-  const startLine = match.line ?? line
-  const lineRange = startLine === undefined ? null : trimmedLineRange(segments, startLine).range
+  // non-whitespace token instead, on the line the match ends: after a
+  // multi-line declaration, not in the middle of it.
+  const endLine = match.endLine ?? match.line ?? span?.to
+  const lineRange = endLine === undefined ? null : trimmedLineRange(segments, endLine).range
   return { ...match, lineRange, startNode: match.range.startContainer, endNode: match.range.endContainer }
 }
 
@@ -392,20 +407,19 @@ function sync() {
   // rendered edges, including offsets inside the first and last token. Its
   // client rects are merged per visual line because Shiki fragments one
   // range by token, and a match can continue on the next line.
-  const lines = mergeVisualLines(range.getClientRects())
+  // Each source line is measured on its own, trimmed of its indentation, so
+  // a continuation line's squiggle starts at its code rather than column 0.
+  const lines = (nextTarget.lineRanges?.length ? nextTarget.lineRanges : [range])
+    .flatMap(lineRange => mergeVisualLines(lineRange.getClientRects()))
   if (!lines.length)
     return
   const first = lines[0]
 
-  // The message goes after the end of the line the match starts on, like
+  // The message goes after the end of the line the match ends on, like
   // IntelliJ's inline diagnostics, so the rest of that line stays readable.
-  let messageRight = first.right
-  if (nextTarget.lineRange) {
-    for (const box of Array.from(nextTarget.lineRange.getClientRects())) {
-      if (box.width)
-        messageRight = Math.max(messageRight, box.right)
-    }
-  }
+  const anchorLines = nextTarget.lineRange ? mergeVisualLines(nextTarget.lineRange.getClientRects()) : []
+  const anchor = anchorLines[anchorLines.length - 1] ?? lines[lines.length - 1]
+  const messageRight = Math.max(anchor.right, lines[lines.length - 1].right)
 
   // The slide clips at its own edge; wrap the message within the remaining
   // room instead of letting it run off the canvas.
@@ -421,7 +435,7 @@ function sync() {
   const targetSize = targetElement ? getComputedStyle(targetElement).fontSize : '12px'
   position.value = {
     left: `${(messageRight - hostBox.left) / scale + 10}px`,
-    top: `${(first.top - hostBox.top + (first.bottom - first.top) / 2) / scale}px`,
+    top: `${(anchor.top - hostBox.top + (anchor.bottom - anchor.top) / 2) / scale}px`,
     maxWidth: `${Math.max(60, (slideBox.right - messageRight) / scale - 34)}px`,
     '--inline-compiler-error-target-size': targetSize || '12px',
   }
@@ -588,18 +602,18 @@ watch([visible, hasTarget, () => props.line, text, () => props.occurrence, textM
         const scope = props.line === undefined ? '' : ` on line ${props.line}`
         if (!needle)
           warnMissingTarget(`\`text\` must be non-empty for "${props.message}" — the diagnostic is not shown.`)
-        else if (props.line !== undefined && (!Number.isInteger(props.line) || props.line < 1))
-          warnMissingTarget(`\`line\` must be a positive integer for "${props.message}" — the diagnostic is not shown.`)
+        else if (lineSpan.value === null)
+          warnMissingTarget(`\`line\` must be a positive integer or a range like "3-6" for "${props.message}" — the diagnostic is not shown.`)
         else if (textMatches.value > 0)
           warnMissingTarget(`Text "${props.text}" only matched ${textMatches.value} time${textMatches.value === 1 ? '' : 's'}${scope}, but \`occurrence\` asks for match ${requestedOccurrence()} — the diagnostic is not shown.`)
         else
-          warnMissingTarget(`Text "${props.text}" was not found${scope} for "${props.message}" — it must match the rendered code exactly${needle.includes('\n') ? ', line breaks and indentation included' : ''}.`)
+          warnMissingTarget(`Text "${props.text}" was not found${scope} for "${props.message}" — it must match the rendered code exactly${needle.includes('\n') ? ', line breaks included (indentation after a line break is optional)' : ''}.`)
       }
       else if (props.line === undefined) {
         warnMissingTarget(`Give either \`line\` or \`text\` for "${props.message}" — the diagnostic is not shown.`)
       }
-      else if (!Number.isInteger(props.line) || props.line < 1) {
-        warnMissingTarget(`\`line\` must be a positive integer for "${props.message}" — the diagnostic is not shown.`)
+      else if (lineSpan.value === null) {
+        warnMissingTarget(`\`line\` must be a positive integer or a range like "3-6" for "${props.message}" — the diagnostic is not shown.`)
       }
       else {
         warnMissingTarget(`No code tokens on line ${props.line} for "${props.message}" — the diagnostic is not shown. Empty lines cannot be annotated; check the \`line\` prop.`)

package/components/README.md

@@ -109,6 +109,37 @@ Mono stack instead of the label's sans face:
 </DrawnAnnotation>
 ```
 
+## Connectors without labels
+
+To start a connector at matched text without a label, explicitly enable it:
+
+```vue
+<DrawnAnnotation text="body" :connect="true" />
+```
+
+Place the annotation before the content containing `body`, or wrap that
+content in its default slot. An omitted or empty `label` works. The line starts
+with a short automatic route from the matched text; drag its handles in the
+visual editor to position it and save `geometry.connector`. Plain text marks
+without an explicit `:connect="true"` keep their mark-only behavior.
+
+Omit `label` and supply `geometry.connector` to draw a connector with fixed
+endpoints, without a target element. Coordinates are fractions of the slide's
+width and height. Use `type="none"` to hide the source mark and `:connect="true"`
+to enable the line even when the deck disables connectors by default.
+
+```vue
+<DrawnAnnotation
+  type="none"
+  :connect="true"
+  :geometry="{ connector: { start: { x: 0.3, y: 0.4 }, end: { x: 0.7, y: 0.6 } } }"
+/>
+```
+
+An optional `control: { x, y }` inside `connector` curves the line. These
+connectors support the same click timing and visual-editor handles as labelled
+connectors. To connect to an element instead, use `target` without `label`.
+
 ## Where the label goes
 
 A label is placed out of the slide's normal flow. Automatic placement is
@@ -445,14 +476,16 @@ Give `text` to mark an exact rendered fragment, even when Shiki split it across
 syntax-token spans. `occurrence` selects its one-based occurrence (default
 `1`). Add `line` to limit the text search to that one-based source line.
 
-A diagnostic can cover several lines: write the line break into `text` as
-`\n` (or a real newline in a bound string), indentation included, exactly as
-the code renders. Every line the match covers gets its own squiggle, and the
-message sits after the line the match starts on, as IntelliJ places its
-inline diagnostics. With `line`, that is the first line of the match.
+A diagnostic can cover several lines. The simplest way is a line range:
+`line="3-6"` underlines the code of lines 3 to 6. Or write the line break
+into `text` as `\n` (or a real newline in a bound string); the indentation
+after a line break may be left out. Every line gets its own squiggle, starting
+at its code rather than at its indentation, and the message sits after the
+last line of the match.
 
 ````md
-<InlineCompilerError text="when (state) {\n  is Loading -> spinner()\n}" message="'when' expression must be exhaustive">
+<InlineCompilerError line="3-6" message="Platform declaration clash">
+<InlineCompilerError text="when (state) {\nis Loading -> spinner()\n}" message="'when' expression must be exhaustive">
 ````
 
 Alternatively, give only `line` to underline the line's non-whitespace code.
@@ -463,8 +496,8 @@ time to settle.
 | prop | required | meaning |
 | --- | --- | --- |
 | `message` | yes | diagnostic shown beside the code and announced to screen readers; the same Markdown as a `DrawnAnnotation` label, so `` `Int` `` renders inline code and `\n` breaks the line |
-| `text` | one of `text` or `line` | exact rendered code text to underline; `\n` continues it on the next line |
-| `line` | one of `text` or `line` | one-based line number; also narrows a `text` search to that line (the first line of a multi-line match) |
+| `text` | one of `text` or `line` | exact rendered code text to underline; `\n` continues it on the next line, whose indentation is optional |
+| `line` | one of `text` or `line` | one-based line number, or an inclusive range like `"3-6"`; also narrows a `text` search to the lines starting at that line |
 | `occurrence` | no | one-based match of `text` to underline; defaults to `1` |
 
 ## Click timing
@@ -643,6 +676,27 @@ fun liveTalks(talks: List<Talk>): List<Talk> =
 </TypeHint>
 ````
 
+`type` draws IntelliJ's other inlay, the inferred type of a declaration, for
+a `val x by …` or any name whose type the code leaves out. `text` names the
+declaration (it has no default here) and the grey `: Column<String>` pill sits
+right after it, inside the line: the code that follows moves right, as in the
+IDE, instead of being covered.
+
+````md
+<TypeHint :line="2" text="customer" type="Column<String>">
+<TypeHint :line="3" text="hours" type="Column<Number>">
+
+```kotlin
+generateExcel("invoices.xlsx", invoices) {
+  val customer by column { it.customer }
+  val hours by column { it.hours }
+}
+```
+
+</TypeHint>
+</TypeHint>
+````
+
 The hint is the message of `SmartCast` and `Warning` in another shape: the
 same exact-text match across Shiki tokens, the same placement after the end
 of the line the match starts on, the same wait for a Magic Move step to
@@ -659,10 +713,11 @@ line (`body { }`), the pill sits after that code instead of covering it.
 
 | prop | required | meaning |
 | --- | --- | --- |
-| `receiver` | one of the two | the lambda's receiver type; rendered as `this: <receiver>` |
-| `context` | one of the two | what a `context(...)` block supplies; rendered as `context(<context>)` |
+| `receiver` | one of the three | the lambda's receiver type; rendered as `this: <receiver>` |
+| `context` | one of the three | what a `context(...)` block supplies; rendered as `context(<context>)` |
+| `type` | one of the three | a declaration's inferred type; rendered as `: <type>` inside the line, right after `text` |
 | `line` | no | one-based line number that narrows the `text` search |
-| `text` | no | exact rendered code the pill follows; defaults to `{` |
+| `text` | with `type` | exact rendered code the pill follows; defaults to `{` for `receiver` and `context` |
 | `occurrence` | no | one-based match of `text` on that line; defaults to `1` |
 
 ## Click timing

package/components/TypeHint.vue

@@ -7,36 +7,48 @@ import { useCodeHighlight } from './code-highlight'
  * IntelliJ's lambda inlay hint: the grey `this: HTML` pill the IDE draws
  * right after the `{` of a lambda with receiver, or `context(Clock)` after
  * the block of a `context(...)` call, which brings a context into scope
- * without touching `this`. Made for DSL slides, where what each block brings
- * into scope is the whole point.
+ * without touching `this`. When code follows the `{` on its line, as in
+ * `formula { hours * rate }`, the pill sits inside the line between the two. Made for DSL slides, where what each block brings
+ * into scope is the whole point. With `type` it is instead the IDE's type
+ * inlay, `: Column<String>` right after the name in `text`, pushing the rest
+ * of the line to the right as IntelliJ does for a `val x by …`.
  */
 const props = defineProps<Omit<CodeHighlightProps, 'message'> & {
   /** The receiver type of the lambda, shown as `this: <receiver>`. */
   receiver?: string
   /** The context a `context(...)` block supplies, shown as `context(<context>)` — no `this:`, as IntelliJ renders it. */
   context?: string
+  /** The inferred type of the declaration named by `text`, shown inline as `: <type>` right after it. */
+  type?: string
 }>()
 const container = useTemplateRef<HTMLElement>('container')
 
-if (import.meta.env.MODE === 'development' && !props.receiver && !props.context)
-  console.warn('[TypeHint] Give `receiver` (rendered `this: …`) or `context` (rendered `context(…)`) — the hint is not shown.')
+if (import.meta.env.MODE === 'development' && !props.receiver && !props.context && !props.type)
+  console.warn('[TypeHint] Give `receiver` (rendered `this: …`), `context` (rendered `context(…)`), or `type` (rendered `: …` after `text`) — the hint is not shown.')
+if (import.meta.env.MODE === 'development' && props.type && !props.text)
+  console.warn('[TypeHint] A `type` hint needs `text`: the name it follows, such as `text="customer"`.')
 
-// The same exact-text match and message placement as `SmartCast` and
-// `Warning`, with nothing painted: the hint sits after the `{` that ends
-// its line, or after the line when more code follows the brace.
+// Use token-attached inlays even when the opening brace ends the line.
+// Floating messages are hidden during Magic Move, while an inlay travels
+// with its token and stays visible throughout the transition. When code
+// follows the match, the inlay also pushes it right as it does in the IDE.
 const highlightProps = reactive({
   ...toRefs(props),
-  text: computed(() => props.text ?? '{'),
-  message: computed(() => props.receiver ? `this: ${props.receiver}` : props.context ? `context(${props.context})` : undefined),
+  text: computed(() => props.text ?? (props.type ? undefined : '{')),
+  message: computed(() => props.type ? undefined : props.receiver ? `this: ${props.receiver}` : props.context ? `context(${props.context})` : undefined),
+})
+const { message, messageShown, messageStyle, inlaid } = useCodeHighlight(highlightProps, container, {
+  component: 'TypeHint',
+  highlightClass: props.type ? 'type-hint-inlay' : 'type-hint-lambda',
+  inlay: () => props.type ? `: ${props.type}` : highlightProps.message,
 })
-const { message, messageShown, messageStyle } = useCodeHighlight(highlightProps, container, { component: 'TypeHint' })
 </script>
 
 <template>
   <div ref="container" class="type-hint-host">
     <slot />
     <Transition name="type-hint">
-      <span v-if="messageShown" class="type-hint" :style="messageStyle">{{ message }}</span>
+      <span v-if="messageShown && !inlaid" class="type-hint" :style="messageStyle">{{ message }}</span>
     </Transition>
   </div>
 </template>
@@ -72,4 +84,31 @@ html.dark .type-hint {
   color: var(--type-hint-color, #8c8c8c);
   background: var(--type-hint-background, #3c3f41);
 }
+/* The `type` inlay lives inside the code line (see `inlay` in
+   code-highlight.ts), so it is unscoped and takes the pill's look while
+   staying in the flow: the code after it moves right. */
+.type-hint-inlay[data-code-inlay]::after,
+.type-hint-lambda[data-code-inlay]::after {
+  content: attr(data-code-inlay);
+  display: inline-block;
+  margin-left: 0.05em;
+  padding: 0 0.45em;
+  border-radius: 0.5em;
+  color: var(--type-hint-color, #6c707e);
+  background: var(--type-hint-background, #ebecf0);
+  font-size: var(--type-hint-size, 0.85em);
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.45;
+  vertical-align: 0.05em;
+  white-space: pre;
+  pointer-events: none;
+  user-select: none;
+}
+.type-hint-lambda[data-code-inlay]::after { margin-left: 0.4em; }
+html.dark .type-hint-inlay[data-code-inlay]::after,
+html.dark .type-hint-lambda[data-code-inlay]::after {
+  color: var(--type-hint-color, #8c8c8c);
+  background: var(--type-hint-background, #3c3f41);
+}
 </style>

package/components/code-highlight.ts

@@ -5,7 +5,8 @@
  * colour and name, so each component is a thin wrapper that hands its props,
  * its host element, and its identity to `useCodeHighlight` and renders the
  * message it returns. `TypeHint` uses the same match and message placement
- * without painting anything: its inlay is the message.
+ * without painting anything: its inlay is the message. Its `type` hint is
+ * instead drawn inside the line, after the match (see `inlay`).
  */
 import type { ClicksInfo } from '@slidev/types'
 import type { Ref } from 'vue'
@@ -58,6 +59,16 @@ export interface CodeHighlightOptions {
    * visible part is the message: the match is then located but left untouched.
    */
   highlightClass?: string
+  /**
+   * Text of an inline inlay drawn right after the match, inside the code line,
+   * so the rest of the line moves right as it does in the IDE. It is set as
+   * `data-code-inlay` on the last painted element and rendered by the
+   * component's CSS as `::after` content, which keeps it out of the text every
+   * other component searches. Needs `highlightClass` to paint the match.
+   * `endsLine` tells whether the match is the last code on its line, for a
+   * component that only draws inside the line when code follows the match.
+   */
+  inlay?: (match: { endsLine: boolean }) => string | undefined
 }
 
 // Classes Shiki Magic Move keeps on its elements only while a step transition
@@ -127,7 +138,7 @@ function unwrap(el: HTMLElement) {
  * steps. `container` is the component's host element around the slot.
  */
 export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLElement | null>, options: CodeHighlightOptions) {
-  const { component, highlightClass } = options
+  const { component, highlightClass, inlay } = options
 
   // Markdown attributes cannot conveniently contain a literal line break, so
   // accept both a real newline (from a bound Vue string) and the `\\n` escape.
@@ -156,6 +167,10 @@ export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLE
   const hasTarget = computed(() => matched.value)
   // True while Shiki Magic Move is transitioning between steps.
   const animating = ref(false)
+  // Whether the current match is the last code on its line; see `inlay`.
+  const matchEndsLine = ref(true)
+  // Whether the inlay is drawn right now, in place of any message.
+  const inlaid = ref(false)
   const messageStyle = ref<CodeHighlightMessageStyle>({ left: '0px', top: '0px', maxWidth: 'none', '--code-highlight-target-size': '12px' })
 
   if (isDevelopment && props.on !== undefined && (props.at !== undefined || props.until !== undefined))
@@ -217,8 +232,10 @@ export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLE
     matches: number
     /** The code of the line the match starts on: the message sits after it. */
     lineRange: Range | null
+    /** Whether the match ends where the code of its first line ends. */
+    endsLine: boolean
   }
-  const NO_TARGET: Target = { range: null, matches: 0, lineRange: null }
+  const NO_TARGET: Target = { range: null, matches: 0, lineRange: null, endsLine: true }
 
   /** Finds the exact text even when Shiki split it across token spans or lines. */
   function findTarget(host: HTMLElement): Target {
@@ -235,7 +252,8 @@ export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLE
     // instead, on the line the match starts.
     const startLine = match.line ?? props.line
     const lineRange = match.range && startLine !== undefined ? trimmedLineRange(segments, startLine).range : null
-    return { range: match.range, matches: match.matches, lineRange }
+    const endsLine = !match.range || !lineRange || match.range.compareBoundaryPoints(Range.END_TO_END, lineRange) >= 0
+    return { range: match.range, matches: match.matches, lineRange, endsLine }
   }
 
   /** Places the message after the end of the match's first line, vertically centred on it. */
@@ -323,6 +341,19 @@ export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLE
     if (!highlightClass)
       return
     const nextTargets = range ? paintRange(range) : []
+    // The inlay belongs after the match, so only its last element carries it.
+    // A data attribute is outside the class observer's filter, so writing it
+    // never retriggers a sync; it is written before the class below, whose
+    // mutation lets the other marks on this fence re-measure the moved line.
+    const inlayText = range ? inlay?.({ endsLine: matchEndsLine.value }) : undefined
+    inlaid.value = !!inlayText
+    const inlayTarget = inlayText ? nextTargets.at(-1) : undefined
+    for (const el of targets.value) {
+      if (el !== inlayTarget && el.hasAttribute('data-code-inlay'))
+        el.removeAttribute('data-code-inlay')
+    }
+    if (inlayTarget && inlayTarget.getAttribute('data-code-inlay') !== inlayText)
+      inlayTarget.setAttribute('data-code-inlay', inlayText!)
     for (const el of targets.value) {
       if (nextTargets.includes(el))
         continue
@@ -358,6 +389,7 @@ export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLE
     }
     const target = findTarget(host)
     textMatches.value = target.matches
+    matchEndsLine.value = target.endsLine
     paint(target.range)
     // Magic Move ends a transition by removing its animation classes, which
     // the class observer below turns into one more sync: the settled edge.
@@ -398,7 +430,7 @@ export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLE
     if (isDevelopment)
       clearAnnotationAuthoringProblems(id)
   })
-  watch([() => props.line, text, () => props.occurrence, message], sync)
+  watch([() => props.line, text, () => props.occurrence, message, () => inlay?.({ endsLine: matchEndsLine.value })], sync)
   watch(visible, sync)
   watch(isCurrentSlide, sync)
 
@@ -430,5 +462,5 @@ export function useCodeHighlight(props: CodeHighlightProps, container: Ref<HTMLE
     }
   }, { immediate: true })
 
-  return { message, messageHtml, messageShown, messageStyle }
+  return { message, messageHtml, messageShown, messageStyle, inlaid }
 }

package/components/code-text-match.ts

@@ -38,6 +38,14 @@ export interface TextMatch extends TextRange {
   matches: number
   /** Source line the match starts on, when the segments carry line numbers. */
   line?: number
+  /** Source line the match ends on, when the segments carry line numbers. */
+  endLine?: number
+  /**
+   * The match cut into one range per source line it covers, each without the
+   * line's indentation or trailing whitespace: one squiggle per line, starting
+   * at the code rather than at column 0. Lines with nothing left are skipped.
+   */
+  lineRanges?: Range[]
 }
 
 /** Tokens Magic Move is animating out; their text is on its way off the slide. */
@@ -165,31 +173,103 @@ export function rangeFromSegments(segments: TextSegment[], start: number, end: n
   return { range, elements }
 }
 
+/**
+ * The needle as a pattern. A line after a `\n` in the needle may start with
+ * any indentation, whatever the needle itself writes there, so a multi-line
+ * target reads `fun f(\nname: String\n)` instead of repeating the code's
+ * exact leading spaces. Everything else matches literally.
+ */
+function needlePattern(needle: string) {
+  const escape = (part: string) => part.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const [first, ...rest] = needle.split('\n')
+  const continued = rest.map(part => part.trim() ? `[ \\t]*${escape(part.trimStart())}` : escape(part))
+  return new RegExp([escape(first), ...continued].join('\n'), 'g')
+}
+
 /**
  * Finds the requested occurrence of `needle` in the flattened segments. With
  * `line`, only that source line is searched — or, for a needle that spans
  * several lines, the lines starting there — and occurrences are counted
- * inside that scope.
+ * inside that scope. Indentation after a line break in the needle is optional
+ * (see `needlePattern`).
  */
 export function findTextInSegments(segments: TextSegment[], needle: string, occurrence: number, line?: number): TextMatch {
   const scoped = line === undefined ? segments : segmentsOnLines(segments, line, lineCount(needle))
   const value = scoped.map(segment => segment.text).join('')
-  const starts: number[] = []
-  for (let index = value.indexOf(needle); index >= 0; index = value.indexOf(needle, index + 1))
-    starts.push(index)
+  const found: { start: number, end: number }[] = []
+  const pattern = needlePattern(needle)
+  for (let match = pattern.exec(value); match; match = pattern.exec(value)) {
+    found.push({ start: match.index, end: match.index + match[0].length })
+    // Overlapping occurrences count, as they did with `indexOf`.
+    pattern.lastIndex = match.index + 1
+  }
 
-  const start = starts[Math.max(1, occurrence) - 1]
-  if (start === undefined)
-    return { range: null, elements: [], matches: starts.length }
+  const hit = found[Math.max(1, occurrence) - 1]
+  if (hit === undefined)
+    return { range: null, elements: [], matches: found.length }
 
-  const { range, elements } = rangeFromSegments(scoped, start, start + needle.length)
+  const { range, elements } = rangeFromSegments(scoped, hit.start, hit.end)
+  if (!range)
+    return { range: null, elements: [], matches: found.length }
+  return {
+    range,
+    elements,
+    matches: found.length,
+    line: lineAt(scoped, hit.start),
+    endLine: lineAt(scoped, hit.end - 1),
+    lineRanges: trimmedLineRanges(scoped, hit.start, hit.end),
+  }
+}
+
+/**
+ * The trimmed code of source lines `from` … `to` as one match: it starts at
+ * the first line's code and ends after the last line's, and has one range per
+ * non-empty line. What a diagnostic on a whole statement or declaration
+ * underlines.
+ */
+export function lineSpanMatch(segments: TextSegment[], from: number, to: number): TextMatch {
+  const scoped = segmentsOnLines(segments, from, to - from + 1)
+  const value = scoped.map(segment => segment.text).join('')
+  const start = value.length - value.trimStart().length
+  const end = value.trimEnd().length
+  if (start >= end)
+    return { range: null, elements: [], matches: 0 }
+  const { range, elements } = rangeFromSegments(scoped, start, end)
   if (!range)
-    return { range: null, elements: [], matches: starts.length }
-  return { range, elements, matches: starts.length, line: startLine(scoped, start) }
+    return { range: null, elements: [], matches: 0 }
+  return {
+    range,
+    elements,
+    matches: 1,
+    line: lineAt(scoped, start),
+    endLine: lineAt(scoped, end - 1),
+    lineRanges: trimmedLineRanges(scoped, start, end),
+  }
+}
+
+/** Cuts `start` … `end` of the joined text at line breaks and trims each piece. */
+function trimmedLineRanges(segments: TextSegment[], start: number, end: number): Range[] {
+  const value = segments.map(segment => segment.text).join('')
+  const ranges: Range[] = []
+  let lineStart = start
+  while (lineStart < end) {
+    const breakAt = value.indexOf('\n', lineStart)
+    const lineEnd = breakAt < 0 || breakAt > end ? end : breakAt
+    const piece = value.slice(lineStart, lineEnd)
+    const from = lineStart + piece.length - piece.trimStart().length
+    const to = lineStart + piece.trimEnd().length
+    if (from < to) {
+      const { range } = rangeFromSegments(segments, from, to)
+      if (range)
+        ranges.push(range)
+    }
+    lineStart = lineEnd + 1
+  }
+  return ranges
 }
 
 /** The source line of the segment containing `offset` of the joined text. */
-function startLine(segments: TextSegment[], offset: number): number | undefined {
+function lineAt(segments: TextSegment[], offset: number): number | undefined {
   let position = 0
   for (const segment of segments) {
     const next = position + segment.text.length

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-kotlin",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "type": "module",
   "exports": {
     "./annotation-editor": {

package/setup/code-imports.ts

@@ -21,6 +21,13 @@
  * the marker line. The comment is valid Kotlin, so the fence still compiles
  * as written; the handout prints it in full.
  *
+ * A `// Solution` marker folds the same way but is for code the audience must
+ * not read: the solution of an exercise slide that shows only the assertions.
+ * The generated Kotlin sources keep it, so the assertions on the slide are
+ * compiled against it, while the handout and `llms-full.txt` print the fence
+ * without it (its import lines aside, so the symbols still resolve for a
+ * reader). Nothing on the slide can reveal it.
+ *
  * Add `show-imports` to the fence info to keep the imports visible on a slide
  * that is about them, or set `themeConfig.foldImports: false` to turn the
  * feature off for a whole deck.
@@ -49,6 +56,12 @@ const IMPORT_LINE = /^import[ \t]+(\S.*?)[ \t]*;?[ \t]*$/
  * counts, and only when there is code above it.
  */
 export const EXAMPLE_MARKER = /^[ \t]*\/\/[ \t]*[Ee]xample(?:[ \t]*:.*)?[ \t]*$/
+/**
+ * The comment that marks where an exercise starts and its solution ends:
+ * `// Solution`, with the same optional description. It folds like
+ * `// Example`, but the folded region is kept out of the handout.
+ */
+export const SOLUTION_MARKER = /^[ \t]*\/\/[ \t]*[Ss]olution(?:[ \t]*:.*)?[ \t]*$/
 const PRELUDE_LINE = /^(?:package[ \t]+\S|@file:)/
 const SHOW_IMPORTS = /(?:^|\s)show-imports(?=\s|$)/
 const THEME_FLAGS = new RegExp(`(?:^|\\s)(?:${THEME_FENCE_FLAGS.join('|')})(?=\\s|$)`, 'g')
@@ -63,6 +76,8 @@ export interface SplitImports {
    * folded region, imports included, without the marker line.
    */
   prefix?: string
+  /** `true` when `prefix` sits above a `// Solution` marker: compiled, never printed. */
+  solution?: boolean
   /** Zero-based index of the first folded line, when something folds. */
   foldStartLine?: number
   /** Zero-based index of the first line kept after the folded region. */
@@ -70,8 +85,9 @@ export interface SplitImports {
 }
 
 /**
- * Split the folded region off a snippet: everything above a `// Example`
- * marker when the snippet has one, otherwise its leading import block.
+ * Split the folded region off a snippet: everything above a `// Example` or
+ * `// Solution` marker when the snippet has one (the first of either kind
+ * counts), otherwise its leading import block.
  *
  * Without a marker, a `package` line or `@file:` annotation before the
  * imports stays in the body. Blank lines are allowed between imports; the
@@ -80,14 +96,29 @@ export interface SplitImports {
  */
 export function splitLeadingImports(code: string): SplitImports {
   const lines = code.split(/\r?\n/)
-  return splitAtExampleMarker(lines) ?? splitImportBlock(code, lines)
+  return splitAtMarker(lines) ?? splitImportBlock(code, lines)
+}
+
+/**
+ * The fence as the handout and `llms-full.txt` print it: a fence with a
+ * `// Solution` marker loses the solution and the marker, keeping only the
+ * solution's import lines above the code. Any other fence is returned as is,
+ * `// Example` prefix included.
+ */
+export function withoutSolution(code: string): string {
+  const split = splitAtMarker(code.split(/\r?\n/))
+  if (!split?.solution)
+    return code
+  const imports = split.imports.map(target => `import ${target}`)
+  return imports.length ? `${imports.join('\n')}\n\n${split.body}` : split.body
 }
 
 /** The marker split, or `undefined` when there is no marker or nothing above it. */
-function splitAtExampleMarker(lines: string[]): SplitImports | undefined {
-  const marker = lines.findIndex(line => EXAMPLE_MARKER.test(line))
+function splitAtMarker(lines: string[]): SplitImports | undefined {
+  const marker = lines.findIndex(line => EXAMPLE_MARKER.test(line) || SOLUTION_MARKER.test(line))
   if (marker < 0)
     return undefined
+  const solution = SOLUTION_MARKER.test(lines[marker])
   const above = lines.slice(0, marker)
   const first = above.findIndex(line => line.trim() !== '')
   // A marker with nothing above it is an ordinary comment.
@@ -104,10 +135,17 @@ function splitAtExampleMarker(lines: string[]): SplitImports | undefined {
     const match = line.match(IMPORT_LINE)
     return match ? [match[1]] : []
   })
-  return { imports, body: lines.slice(end).join('\n'), prefix: prefix.join('\n'), foldStartLine: 0, bodyStartLine: end }
+  return {
+    imports,
+    body: lines.slice(end).join('\n'),
+    prefix: prefix.join('\n'),
+    ...(solution && { solution }),
+    foldStartLine: 0,
+    bodyStartLine: end,
+  }
 }
 
-/** Split only the leading import block off a snippet, ignoring any `// Example` marker. */
+/** Split only the leading import block off a snippet, ignoring any `// Example` or `// Solution` marker. */
 export function splitImportBlock(code: string, lines: string[] = code.split(/\r?\n/)): SplitImports {
   let start = 0
   while (start < lines.length && (lines[start].trim() === '' || PRELUDE_LINE.test(lines[start])))
@@ -233,7 +271,7 @@ function foldFence(lines: Line[], open: number, close: number, info: string, edi
 
 export interface FoldOptions {
   /**
-   * Fold the imports (or the `// Example` prefix) of each fence. `false`
+   * Fold the imports (or the `// Example` / `// Solution` prefix) of each fence. `false`
    * (`themeConfig.foldImports: false`) leaves the code as written; the
    * theme's flags still leave the info line, since Slidev must never see them.
    */
@@ -242,7 +280,7 @@ export interface FoldOptions {
 
 /**
  * Compute the edits that strip the theme's flags from, and fold the imports
- * (or the `// Example` prefix) of, every code fence in a slide's Markdown:
+ * (or the `// Example` / `// Solution` prefix) of, every code fence in a slide's Markdown:
  * top-level three-backtick fences and the steps of a classic
  * ````md magic-move```` block. Fences nested in any other four-plus-backtick
  * or tilde block are left alone.

package/setup/code-window-icon.ts

@@ -11,6 +11,10 @@ export function codeWindowIcon(language: string, meta = ''): string | undefined
     return 'amper'
   if (language === 'xml' && modifier === 'maven')
     return 'maven'
+  if (['kotlin', 'kt', 'kts'].includes(language) && modifier === 'ktor')
+    return 'ktor'
+  if (['kotlin', 'kt', 'kts'].includes(language) && modifier === 'arrow')
+    return 'arrow'
   if (['kotlin', 'kt', 'kts'].includes(language))
     return 'kotlin'
   if (language === 'java')

package/setup/kotlin-snippets.ts

@@ -13,7 +13,9 @@
  *   fence and a Kotlin fence on the same slide share that package, allowing
  *   them to demonstrate Java ↔ Kotlin interop;
  * - the imports written in the fence are kept, as is anything folded above
- *   a `// Example` marker, and the deck can add shared imports
+ *   a `// Example` or `// Solution` marker (an exercise slide's assertions
+ *   compile against the solution the handout never prints), and the deck
+ *   can add shared imports
  *   (`themeConfig.snippets.imports`) for tables and types the slides use
  *   without defining, kept in a hand-written support package;
  * - Kotlin top-level declarations stay top-level and bare statements are
@@ -100,6 +102,11 @@ type Mode = 'code' | 'block' | 'string' | 'raw'
  * char literals, so a caller can tell where top-level constructs begin.
  */
 export function scanKotlin(code: string): ScannedLine[] {
+  return scanSource(code, true)
+}
+
+/** Java shares the bracket/string scan, but has no string templates or nested block comments. */
+function scanSource(code: string, kotlin: boolean): ScannedLine[] {
   const result: ScannedLine[] = []
   let depth = 0
   let mode: Mode = 'code'
@@ -156,7 +163,7 @@ export function scanKotlin(code: string): ScannedLine[] {
         continue
       }
       if (mode === 'block') {
-        if (two === '/*') {
+        if (kotlin && two === '/*') {
           blockDepth++
           masked += '  '
           i += 2
@@ -174,7 +181,7 @@ export function scanKotlin(code: string): ScannedLine[] {
         }
         continue
       }
-      if (two === '${') {
+      if (kotlin && two === '${') {
         templates.push({ mode, depth })
         depth++
         mode = 'code'
@@ -226,9 +233,10 @@ export interface TopLevelSplit {
 const MODIFIERS = 'public|private|protected|internal|expect|actual|final|open|abstract|sealed|const|external|override|lateinit|tailrec|vararg|suspend|inner|enum|annotation|companion|inline|value|infix|operator|data|noinline|crossinline'
 const DECLARATION = new RegExp(`^(?:@[\\w.]+(?:\\([^)]*\\))?\\s+)*(?:(?:${MODIFIERS})\\s+)*(?:fun|val|var|object|class|interface|typealias)\\b`)
 const DECLARATION_PREFIX = /^(?:@[\w.]|context\s*\()/
-// `val _ = f()` discards a result and `val (a, b) = pair` destructures one;
+// `val _ = f()` discards a result, `val (a, b) = pair` destructures one, and
+// so does the positional `val [a, b] = pair` of `-Xname-based-destructuring`;
 // underscore names and destructuring are only legal for locals.
-const LOCAL_ONLY = /^(?:val|var)\s+(?:_+\s*(?::|=)|\()/
+const LOCAL_ONLY = /^(?:val|var)\s+(?:_+\s*(?::|=)|[([])/
 // A non-indented line that can only continue the construct above it.
 const CONTINUATION = /^(?:[.)\]}]|\?[.:]|&&|\|\||->|else\b|catch\b|finally\b)/
 // A line after which the construct is still open.
@@ -314,7 +322,10 @@ function identifier(slug: string): string {
 
 /** Java requires a public top-level type to have the same name as its source file. */
 function javaCompilationUnitName(code: string): string | undefined {
-  return code.match(/^public\s+(?:(?:final|abstract|sealed|non-sealed|static|strictfp)\s+)*(?:class|interface|enum|record|@interface)\s+(\w+)/m)?.[1]
+  const topLevel = scanSource(code, false)
+    .map(line => line.depthAtStart === 0 ? line.masked : '')
+    .join('\n')
+  return topLevel.match(/^\s*public\s+(?:(?:final|abstract|sealed|non-sealed|static|strictfp)\s+)*(?:class|interface|enum|record|@interface)\s+(\w+)/m)?.[1]
 }
 
 // Attribute lists may hold `>` inside quotes (`message="a > b"`), so a tag

package/setup/magic-move-between.ts

@@ -40,7 +40,7 @@ export interface ParsedFence {
   code: string
   /** Import targets folded off the top of `code` (see `code-imports.ts`). */
   imports: string[]
-  /** The code folded above a `// Example` marker, imports included, if the fence has one. */
+  /** The code folded above a `// Example` or `// Solution` marker, imports included, if the fence has one. */
   prefix?: string
 }
 

package/setup/static-content.ts

@@ -24,7 +24,8 @@
  * Theme-specific markup is translated rather than dropped: a `DrawnAnnotation`
  * label becomes a quoted note about the code it points at, an
  * `InlineCompilerError` becomes its diagnostic, and imports folded on the
- * slides (see `code-imports.ts`) stay in the handout's fences, expanded.
+ * slides (see `code-imports.ts`) stay in the handout's fences, expanded. A
+ * `// Solution` region does not: it is compiled but never printed.
  */
 import type { ResolvedSlidevOptions, SlideInfo } from '@slidev/types'
 import type { HtmlTagDescriptor, Plugin } from 'vite'
@@ -35,6 +36,7 @@ import { basename, dirname, extname, relative, resolve } from 'node:path'
 import MarkdownIt from 'markdown-it'
 import { goatcounterTag, resolveAnalyticsSettings } from './analytics'
 import { codeWindowIcon } from './code-window-icon'
+import { withoutSolution } from './code-imports'
 import { parseFenceInfo } from './magic-move-between'
 import type { ParsedFence } from './magic-move-between'
 
@@ -294,10 +296,10 @@ function highlightNote(title: string, raw: string): string {
   return `\n\n> **${title}**${target}: ${note}\n\n`
 }
 
-/** `TypeHint` renders `this: HTML` after a brace, or `context(Clock)` for a context block. */
+/** `TypeHint` renders `this: HTML` after a brace, `context(Clock)` for a context block, or `customer: Column<String>` for a `type`. */
 function typeHintNote(raw: string): string {
-  const { receiver, context } = parseAttributes(raw)
-  const hint = context ? `context(${context})` : receiver ? `this: ${receiver}` : ''
+  const { receiver, context, type, text } = parseAttributes(raw)
+  const hint = type ? `${text ?? ''}: ${type}` : context ? `context(${context})` : receiver ? `this: ${receiver}` : ''
   return hint ? `\n\n> **Type hint** ${code(hint)}\n\n` : ''
 }
 
@@ -402,10 +404,15 @@ export function fenceCaption(fence: ParsedFence): string {
   return [identity, fence.title].filter(Boolean).join(' · ')
 }
 
+/**
+ * Parse a fence block for the handout: imports and an `// Example` prefix
+ * stay in the code, a `// Solution` prefix leaves it (see `withoutSolution`).
+ */
 export function parseFenceBlock(block: string): ParsedFence {
   const lines = block.split(/\r?\n/)
   const info = lines[0].replace(/^ {0,3}(`{3,}|~{3,})/, '').trim()
-  return parseFenceInfo(info, lines.slice(1, -1).join('\n'), { foldImports: false })
+  const fence = parseFenceInfo(info, lines.slice(1, -1).join('\n'), { foldImports: false })
+  return { ...fence, code: withoutSolution(fence.code) }
 }
 
 /**

package/styles/layout.css

@@ -12,6 +12,8 @@
     --code-window-r2dbc-color: #06b6d4;
     --code-window-gradle-color: #6c707e;
     --code-window-amper-color: #087cfa;
+    --code-window-arrow-color: #2455cf;
+    --code-window-ktor-color: #7f52ff;
     --code-window-java-color: #e66d17;
     --code-window-terminal-color: #6c707e;
     --code-window-maven-color: #3574f0;
@@ -57,6 +59,8 @@ html.dark {
     --code-window-r2dbc-color: #06b6d4;
     --code-window-gradle-color: #ced0d6;
     --code-window-amper-color: #087cfa;
+    --code-window-arrow-color: #497bf7;
+    --code-window-ktor-color: #a578ff;
     --code-window-java-color: #c77d55;
     --code-window-terminal-color: #ced0d6;
     --code-window-maven-color: #548af7;
@@ -143,6 +147,20 @@ html.dark {
     --code-window-border: var(--code-window-amper-color);
 }
 
+/* `kotlin arrow`: Kotlin code that is really about an Arrow library. The mark
+   is Arrow's brand icon and the outline its blue; the same icon serves both
+   colour schemes. */
+.slidev-code-wrapper:is(.code-window-icon--arrow, :has(code.code-window-icon--arrow)) {
+    --code-window-icon: url('../assets/code-window/arrow.svg');
+    --code-window-border: var(--code-window-arrow-color);
+}
+
+/* `kotlin ktor`: Ktor's primary icon and purple identity border. */
+.slidev-code-wrapper:is(.code-window-icon--ktor, :has(code.code-window-icon--ktor)) {
+    --code-window-icon: url('../assets/code-window/ktor.svg');
+    --code-window-border: var(--code-window-ktor-color);
+}
+
 .slidev-code-wrapper:is(.code-window-icon--java, :has(code.code-window-icon--java)) {
     --code-window-icon: url('../assets/code-window/java.svg');
     --code-window-border: var(--code-window-java-color);
@@ -233,6 +251,10 @@ html.dark .slidev-code-wrapper:is(.code-window-icon--amper, :has(code.code-windo
     --code-window-border: var(--code-window-amper-color);
 }
 
+html.dark .slidev-code-wrapper:is(.code-window-icon--arrow, :has(code.code-window-icon--arrow)) {
+    --code-window-border: var(--code-window-arrow-color);
+}
+
 html.dark .slidev-code-wrapper:is(.code-window-icon--java, :has(code.code-window-icon--java)) {
     --code-window-icon: url('../assets/code-window/java_dark.svg');
     --code-window-border: var(--code-window-java-color);