slidev-theme-kotlin 0.13.1 → 0.13.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 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

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;

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/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

package/components/TypeHint.vue

@@ -28,11 +28,10 @@ if (import.meta.env.MODE === 'development' && !props.receiver && !props.context
 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. When more code follows the brace, it is drawn inside the line
-// instead, right after the match, as is a `type` hint (the `.type-hint-inlay`
-// rule below), so the rest of the line moves right as it does in the IDE.
+// 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 ?? (props.type ? undefined : '{')),
@@ -41,7 +40,7 @@ const highlightProps = reactive({
 const { message, messageShown, messageStyle, inlaid } = useCodeHighlight(highlightProps, container, {
   component: 'TypeHint',
   highlightClass: props.type ? 'type-hint-inlay' : 'type-hint-lambda',
-  inlay: ({ endsLine }) => props.type ? `: ${props.type}` : endsLine ? undefined : highlightProps.message,
+  inlay: () => props.type ? `: ${props.type}` : highlightProps.message,
 })
 </script>
 

package/package.json

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

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/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);