@smoothstream/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Smoothstream contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @smoothstream/vue
+
+Deterministic, paced streaming Markdown for Vue 3 and Nuxt.
+
+```sh
+npm install @smoothstream/vue vue
+```
+
+```vue
+<script setup lang="ts">
+import { Smoothstream } from "@smoothstream/vue";
+</script>
+
+<template>
+  <Smoothstream
+    :markdown="message.content"
+    :receiving="message.isStreaming"
+  />
+</template>
+```
+
+Streaming mode is the default. Render completed content such as previous chat
+messages immediately with `mode="static"`:
+
+```vue
+<Smoothstream :markdown="previousMessage.content" mode="static" />
+```
+
+Each mounted component represents one append-only response. Give a different
+response a new Vue `key`. Static rendering is SSR-safe; browser-only playback,
+resource loading, highlighting, and clipboard work begin after mounting.
+
+Default reveal mechanics and prose styling are loaded automatically.

package/dist/base.css

@@ -0,0 +1,349 @@
+@keyframes smoothstream-text-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes smoothstream-block-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes smoothstream-rule-in {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes smoothstream-table-row-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes smoothstream-marker-in {
+  from {
+    color: transparent;
+  }
+}
+
+@keyframes smoothstream-task-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes smoothstream-image-in {
+  from {
+    filter: blur(4px);
+    opacity: 0;
+  }
+
+  to {
+    filter: blur(0);
+    opacity: 1;
+  }
+}
+
+[data-smoothstream-mode="streaming"][data-smoothstream-motion="animate"] {
+  font-kerning: none;
+}
+
+/*
+ * The invisible generated suffix lets the browser apply the consumer's normal
+ * line-breaking rules to a buffered word before its first character appears.
+ */
+[data-smoothstream-remainder]::after {
+  content: attr(data-smoothstream-remainder);
+  visibility: hidden;
+}
+
+[data-smoothstream-kind="text"],
+[data-smoothstream-kind="inline"],
+[data-smoothstream-kind="link"] {
+  animation: smoothstream-text-in var(--smoothstream-duration, 180ms)
+    cubic-bezier(0.22, 1, 0.36, 1) var(--smoothstream-animation-delay, 0ms) both;
+}
+
+[data-smoothstream-kind="heading"],
+[data-smoothstream-kind="list-item"] {
+  animation: smoothstream-block-in var(--smoothstream-duration, 260ms)
+    cubic-bezier(0.22, 1, 0.36, 1) var(--smoothstream-animation-delay, 0ms) both;
+}
+
+[data-smoothstream-kind="block"] {
+  transform-origin: center;
+  animation: smoothstream-rule-in var(--smoothstream-duration, 1200ms)
+    cubic-bezier(0.16, 1, 0.3, 1) var(--smoothstream-animation-delay, 0ms) both;
+}
+
+[data-smoothstream-kind="table-row"] {
+  animation: smoothstream-table-row-in var(--smoothstream-duration, 400ms)
+    cubic-bezier(0.22, 1, 0.36, 1) var(--smoothstream-animation-delay, 0ms) both;
+}
+
+[data-smoothstream-kind="image"] {
+  animation: smoothstream-image-in var(--smoothstream-duration, 400ms)
+    cubic-bezier(0.22, 1, 0.36, 1) var(--smoothstream-animation-delay, 0ms) both;
+}
+
+[data-smoothstream-marker="active"]::marker {
+  animation: smoothstream-marker-in var(--smoothstream-duration, 400ms)
+    cubic-bezier(0.22, 1, 0.36, 1) var(--smoothstream-animation-delay, 0ms) both;
+}
+
+[data-smoothstream-task="active"] {
+  animation: smoothstream-task-in var(--smoothstream-duration, 400ms)
+    cubic-bezier(0.22, 1, 0.36, 1) var(--smoothstream-animation-delay, 0ms) both;
+}
+
+[data-smoothstream-code-copy] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--smoothstream-duration, 400ms)
+    cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-smoothstream-code-copy][data-smoothstream-ready="true"] {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/*
+ * Enhanced code blocks remain a real <pre>, so consumer pre styles wrap the
+ * toolbar and code together. These rules provide only the component structure
+ * needed by any optional highlighter.
+ */
+pre[data-smoothstream-code-block] {
+  overflow: hidden;
+  background-color: var(
+    --smoothstream-code-background,
+    var(
+      --smoothstream-shiki-background,
+      var(--smoothstream-code-default-background, transparent)
+    )
+  );
+  color: var(
+    --smoothstream-code-color,
+    var(
+      --smoothstream-shiki-color,
+      var(--smoothstream-code-default-color, inherit)
+    )
+  );
+  font-family: inherit;
+  font-size: inherit;
+}
+
+[data-smoothstream-code-toolbar] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  justify-content: space-between;
+  gap: 1rem;
+  color: inherit;
+  white-space: normal;
+}
+
+[data-smoothstream-code-language] {
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--smoothstream-code-language-font-size, 0.875em);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-smoothstream-code-copy] {
+  display: grid;
+  inline-size: var(--smoothstream-code-copy-button-size, max(1.75rem, 1.75em));
+  block-size: var(--smoothstream-code-copy-button-size, max(1.75rem, 1.75em));
+  flex: 0 0 auto;
+  place-items: center;
+  padding: 0;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+pre[data-smoothstream-code-block] > code {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+/*
+ * Without a language label, the toolbar no longer reserves a header row. The
+ * copy control floats above the scrollport while trailing inline padding lets
+ * every line scroll completely clear of it.
+ */
+pre[data-smoothstream-code-block][data-smoothstream-code-language-hidden] {
+  position: relative;
+}
+
+pre[data-smoothstream-code-block][data-smoothstream-code-language-hidden]
+  [data-smoothstream-code-toolbar] {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: var(--smoothstream-code-copy-inset-block, 0.45rem);
+  inset-inline-end: var(--smoothstream-code-copy-inset-inline, 0.45rem);
+  min-height: 0;
+  padding: 0;
+  pointer-events: none;
+}
+
+pre[data-smoothstream-code-block][data-smoothstream-code-language-hidden]
+  [data-smoothstream-code-language] {
+  display: none;
+}
+
+pre[data-smoothstream-code-block][data-smoothstream-code-language-hidden]
+  [data-smoothstream-code-copy] {
+  margin-inline-end: 0;
+  border-radius: var(--smoothstream-code-copy-border-radius, 0.375rem);
+  background-color: var(
+    --smoothstream-code-copy-background,
+    color-mix(
+      in srgb,
+      var(
+          --smoothstream-code-background,
+          var(
+            --smoothstream-shiki-background,
+            var(--smoothstream-code-default-background, transparent)
+          )
+        )
+        20%,
+      transparent
+    )
+  );
+  backdrop-filter: blur(var(--smoothstream-code-copy-backdrop-blur, 8px));
+  -webkit-backdrop-filter: blur(
+    var(--smoothstream-code-copy-backdrop-blur, 4px)
+  );
+}
+
+pre[data-smoothstream-code-block][data-smoothstream-code-language-hidden]
+  > code {
+  box-sizing: border-box;
+  inline-size: 100%;
+  padding-inline-end: calc(
+    var(--smoothstream-code-padding-inline, 0px) +
+      var(--smoothstream-code-copy-button-size, max(1.75rem, 1.75em)) +
+      var(--smoothstream-code-copy-clearance, 0.5rem)
+  );
+}
+
+[data-smoothstream-code-icon-swap] {
+  position: relative;
+  display: inline-grid;
+}
+
+[data-smoothstream-code-icon] {
+  inline-size: var(--smoothstream-code-copy-icon-size, max(14px, 1em));
+  block-size: var(--smoothstream-code-copy-icon-size, max(14px, 1em));
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--smoothstream-icon-swap-duration, 250ms) ease-in-out,
+    filter var(--smoothstream-icon-swap-duration, 250ms) ease-in-out,
+    transform var(--smoothstream-icon-swap-duration, 250ms) ease-in-out;
+  will-change: opacity, filter, transform;
+}
+
+[data-smoothstream-code-icon-swap][data-state="copy"]
+  [data-smoothstream-code-icon="copy"],
+[data-smoothstream-code-icon-swap][data-state="check"]
+  [data-smoothstream-code-icon="check"] {
+  opacity: 1;
+  filter: blur(0);
+  transform: scale(1);
+}
+
+[data-smoothstream-code-icon-swap][data-state="copy"]
+  [data-smoothstream-code-icon="check"],
+[data-smoothstream-code-icon-swap][data-state="check"]
+  [data-smoothstream-code-icon="copy"] {
+  opacity: 0;
+  filter: blur(2px);
+  transform: scale(0.25);
+}
+
+/*
+ * Table containment is rendering behavior rather than optional typography.
+ * The shell stays fixed while only the nested viewport scrolls.
+ */
+[data-smoothstream-table-shell] {
+  width: fit-content;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+[data-smoothstream-table-scroll] {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+}
+
+[data-smoothstream-table-scroll] > table {
+  width: fit-content;
+  max-width: none;
+  margin: 0;
+}
+
+[data-smoothstream-table-scroll] th {
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+[data-smoothstream-table-scroll] td {
+  overflow-wrap: normal;
+}
+
+[data-smoothstream-motion="none"] [data-smoothstream-code-copy],
+[data-smoothstream-motion="none"] [data-smoothstream-code-icon-swap],
+[data-smoothstream-motion="none"] [data-smoothstream-code-icon] {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-smoothstream-reduced-motion="system"] [data-smoothstream-unit],
+  [data-smoothstream-reduced-motion="system"]
+    [data-smoothstream-marker="active"]::marker,
+  [data-smoothstream-reduced-motion="system"] [data-smoothstream-task="active"],
+  [data-smoothstream-reduced-motion="system"] [data-smoothstream-code-copy],
+  [data-smoothstream-reduced-motion="system"]
+    [data-smoothstream-code-icon-swap],
+  [data-smoothstream-reduced-motion="system"] [data-smoothstream-code-icon],
+  [data-smoothstream-reduced-motion="always"] [data-smoothstream-unit],
+  [data-smoothstream-reduced-motion="always"]
+    [data-smoothstream-marker="active"]::marker,
+  [data-smoothstream-reduced-motion="always"] [data-smoothstream-task="active"],
+  [data-smoothstream-reduced-motion="always"] [data-smoothstream-code-copy],
+  [data-smoothstream-reduced-motion="always"]
+    [data-smoothstream-code-icon-swap],
+  [data-smoothstream-reduced-motion="always"] [data-smoothstream-code-icon] {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,112 @@
+import * as _smoothstream_core from '@smoothstream/core';
+import { MarkdownReveal, CodeHighlighter } from '@smoothstream/core';
+export { CodeHighlightLine, CodeHighlightPalette, CodeHighlightRequest, CodeHighlightResult, CodeHighlightToken, CodeHighlighter, CodeTokenStyle } from '@smoothstream/core';
+import * as vue from 'vue';
+import { PropType, VNode } from 'vue';
+
+type SmoothstreamMode = "streaming" | "static";
+type SmoothstreamReducedMotion = "system" | "always" | "never";
+type SmoothstreamReveal = MarkdownReveal;
+interface SmoothstreamProps {
+    /** Optional syntax highlighter for fenced code blocks. */
+    codeHighlighter?: CodeHighlighter;
+    /** Milliseconds spent animating each revealed character or word. @default 1000 */
+    duration?: number;
+    /** Base cadence in milliseconds; word mode preserves it while grouping characters. @default 3 */
+    interval?: number;
+    /** Accumulated Markdown snapshot to present. */
+    markdown?: string;
+    /** Progressively reveal streaming content or render completed Markdown immediately. @default "streaming" */
+    mode?: SmoothstreamMode;
+    /** Whether more Markdown may still arrive. */
+    receiving?: boolean;
+    /** Reduced-motion policy: follow the system preference, always reduce, or never reduce. @default "system" */
+    reducedMotion?: SmoothstreamReducedMotion;
+    /** Reveal flowing text by character or by complete word. @default "character" */
+    reveal?: SmoothstreamReveal;
+    /** Disable Smoothstream's default prose theme while retaining reveal and layout behavior. */
+    unstyled?: boolean;
+}
+
+declare const Smoothstream: vue.DefineComponent<vue.ExtractPropTypes<{
+    codeHighlighter: PropType<CodeHighlighter | undefined>;
+    duration: {
+        default: number;
+        type: NumberConstructor;
+    };
+    interval: {
+        default: number;
+        type: NumberConstructor;
+    };
+    markdown: {
+        default: string;
+        type: StringConstructor;
+    };
+    mode: {
+        default: string;
+        type: PropType<SmoothstreamMode>;
+    };
+    receiving: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    reducedMotion: {
+        default: string;
+        type: PropType<SmoothstreamReducedMotion>;
+    };
+    reveal: {
+        default: string;
+        type: PropType<SmoothstreamReveal>;
+    };
+    unstyled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    codeHighlighter: PropType<CodeHighlighter | undefined>;
+    duration: {
+        default: number;
+        type: NumberConstructor;
+    };
+    interval: {
+        default: number;
+        type: NumberConstructor;
+    };
+    markdown: {
+        default: string;
+        type: StringConstructor;
+    };
+    mode: {
+        default: string;
+        type: PropType<SmoothstreamMode>;
+    };
+    receiving: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    reducedMotion: {
+        default: string;
+        type: PropType<SmoothstreamReducedMotion>;
+    };
+    reveal: {
+        default: string;
+        type: PropType<SmoothstreamReveal>;
+    };
+    unstyled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    mode: SmoothstreamMode;
+    duration: number;
+    interval: number;
+    markdown: string;
+    receiving: boolean;
+    reducedMotion: SmoothstreamReducedMotion;
+    reveal: _smoothstream_core.MarkdownReveal;
+    unstyled: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Smoothstream, type SmoothstreamMode, type SmoothstreamProps, type SmoothstreamReducedMotion, type SmoothstreamReveal };