mikuru 1.0.26 → 1.0.28

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.0.28 - 2026-05-15
+
+- Added package-exported Mikuru video player, audio player, image viewer, modal, carousel, toast, dropdown, tooltip, progress, and code block components with custom controls, template refs, lifecycle cleanup, keyboard-accessible seeking/navigation, volume, mute, playback rate, stop, fullscreen, close/select/dismiss events, progress states, and copy actions.
+- Updated the dogfood media player UI with video-overlay controls, Font Awesome-shaped CSS mask icons, auto-hiding playback controls, and a custom seek track that renders cleanly at the final position.
+- Fixed Vite-routed component CSS requests so style virtual module URLs are keyed by compiled style content, preventing stale `<style scoped>` CSS from being reused after SFC style changes.
+- Added compiler coverage for content-keyed Vite CSS requests so repeated transforms of the same `.mikuru` file with changed styles resolve to distinct style module URLs.
+
 ## 1.0.26 - 2026-05-15
 
 - Improved scoped CSS rewriting with native CSS nesting, `@starting-style`, additional raw descriptor at-rules, and stronger `:deep(...)` / `:global(...)` parsing around attributes and functional pseudo-class arguments.

package/README.md

@@ -149,8 +149,11 @@ declare const Greeting: MikuruComponent<GreetingProps>;
 - SSR through `compileSsr()` and `mikuru/server`, covering escaped text, static and bound attributes, content directives, `m-pre`, `m-cloak`, `m-if` chains, `m-for`, async child components, props, named/default slots, scoped slot props, component tree context, Teleport collection, string and async iterable stream rendering, and router route rendering with context propagation
 - Hydration through `compileHydration()` and `hydrateRoute()`, reusing existing SSR DOM while attaching events, syncing text/attributes, recovering structural mismatches with an opt-out remount fallback, hydrating component context/lifecycle hooks, `m-show`, DOM and component `m-model`, `m-pre`, `m-cloak`, initial `m-if` / `m-for` DOM, Teleport target and disabled inline content, delegating child and route components to `hydrate()` when available, and optionally starting router history listening after route hydration
 - Style injection and `<style scoped>` selector rewriting for common selectors, native CSS nesting, `:global(...)`, `:deep(...)`, nested at-rules, and malformed CSS diagnostics
+- Vite-routed component CSS for CSS Modules with `<style module>`, preprocessor languages such as `<style lang="scss">`, and project-level CSS transforms such as PostCSS when using `mikuru/vite`
+- Content-keyed Vite style requests so `.mikuru` scoped CSS updates reload reliably during development instead of reusing stale virtual style modules
+- Optional TypeScript template type checking with `typeCheckTemplate()`, `compile(..., { templateTypeCheck: true })`, and `mikuru({ templateTypeCheck: true })`, including script bindings, `defineProps()` constructor inference, ref unwrapping, and `m-for` item/index scopes
 - Compile errors with filenames, line/column information, code frames, and typo suggestions for built-in attributes, directives, and modifiers
-- Debug diagnostics with optional generated `sourceURL`, `v-*` compatibility warnings, unstable devtools metadata/events, compiler/style diagnostic locations and frames, and hydration warnings that include phase, component, and filename context
+- Stable devtools diagnostics with optional generated `sourceURL`, `v-*` compatibility warnings, versioned metadata/events, component tree snapshots, compiler/style diagnostic locations and frames, and hydration warnings that include phase, component, and filename context
 
 ## Package Exports
 
@@ -228,9 +231,7 @@ const open = ref(false);
 
 ## Not Included in v1
 
-Mikuru does not claim Vue compatibility. The v1 package does not include stable devtools or full template type checking.
-
-Scoped CSS is supported for common selector rewriting, native CSS nesting, `:global(...)`, `:deep(...)`, nested at-rules such as `@media`, `@scope`, and `@starting-style`, and malformed block diagnostics. What is not included in v1 is a full CSS compiler: CSS Modules, preprocessors, and project-level CSS transforms stay outside the package.
+- Full Vue compatibility.
 
 ## Repository Development
 
@@ -267,10 +268,41 @@ npm run dev:mikuru-sample
 npm run dev:mikuru-vue-like
 ```
 
+The package also includes original Mikuru components:
+
+- `MikuruVideoPlayer.mikuru`: overlay video controls, div-based seeking, volume/mute, playback rate, stop, and fullscreen controls.
+- `MikuruAudioPlayer.mikuru`: audio playback with seeking, skip controls, volume, and mute.
+- `MikuruImageViewer.mikuru`: image zoom, pan, rotate, reset, and fullscreen controls.
+- `MikuruModal.mikuru`: accessible modal shell with backdrop, Escape close, slots, and close events.
+- `MikuruCarousel.mikuru`: image carousel with arrows, dots, keyboard navigation, and optional autoplay.
+- `MikuruToast.mikuru`: fixed notification stack with dismiss events and tone variants.
+- `MikuruDropdown.mikuru`: menu button with outside-click close, Escape handling, and select events.
+- `MikuruToolTip.mikuru`: hover/focus tooltip with configurable placement.
+- `MikuruProgress.mikuru`: determinate and indeterminate progress indicator.
+- `MikuruCodeBlock.mikuru`: code display with language label, line numbers, and copy action.
+
+They can be imported from the package:
+
+```mikuru
+<script>
+import MikuruVideoPlayer from "mikuru/components/MikuruVideoPlayer";
+import MikuruAudioPlayer from "mikuru/components/MikuruAudioPlayer";
+import MikuruImageViewer from "mikuru/components/MikuruImageViewer";
+import MikuruModal from "mikuru/components/MikuruModal";
+import MikuruCarousel from "mikuru/components/MikuruCarousel";
+import MikuruToast from "mikuru/components/MikuruToast";
+import MikuruDropdown from "mikuru/components/MikuruDropdown";
+import MikuruToolTip from "mikuru/components/MikuruToolTip";
+import MikuruProgress from "mikuru/components/MikuruProgress";
+import MikuruCodeBlock from "mikuru/components/MikuruCodeBlock";
+</script>
+```
+
 ## Documentation
 
 - `CHANGELOG.md` lists published package changes.
 - `docs/npm-usage.md` shows a manual Vite setup for package consumers.
+- `docs/mikuru-components.md` shows usage examples for package-exported Mikuru components.
 - `docs/app-architecture.md` describes how to keep larger Mikuru apps split across components, API modules, stores, forms, auth, and tests.
 - `docs/router.md` documents the runtime router.
 - `docs/production-readiness.md` summarizes debugging, parser, package, SSR, and hydration caveats.

package/components/MikuruAudioPlayer.mikuru

@@ -0,0 +1,263 @@
+<template>
+  <section class="mikuru-audio" :class="{ 'is-playing': isPlaying }" :aria-label="title">
+    <audio
+      ref="mediaEl"
+      :src="src"
+      :preload="preload"
+      @loadedmetadata="syncMedia"
+      @timeupdate="syncMedia"
+      @durationchange="syncMedia"
+      @play="markPlaying"
+      @pause="markPaused"
+      @ended="markPaused"
+    ></audio>
+
+    <div class="art">
+      <span>{{ initials }}</span>
+    </div>
+
+    <div class="body">
+      <div class="identity">
+        <strong>{{ title }}</strong>
+        <span>{{ artist }}</span>
+      </div>
+
+      <div class="timeline">
+        <span>{{ formatTime(currentTime) }}</span>
+        <input type="range" min="0" :max="safeDuration" step="0.1" :value="currentTime" @input="seek" />
+        <span>{{ formatTime(duration) }}</span>
+      </div>
+
+      <div class="controls">
+        <button type="button" @click="skipBackward">-10</button>
+        <button class="primary" type="button" @click="togglePlayback" :aria-label="playLabel">
+          <span m-if="isPlaying">Pause</span>
+          <span m-else>Play</span>
+        </button>
+        <button type="button" @click="skipForward">+10</button>
+        <button type="button" @click="toggleMute" :aria-label="muteLabel">
+          <span m-if="muted">Muted</span>
+          <span m-else>Sound</span>
+        </button>
+        <label class="volume">
+          <span>Volume</span>
+          <input type="range" min="0" max="1" step="0.01" :value="volume" @input="setVolume" />
+        </label>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { computed, onMounted, ref } from "mikuru";
+
+const {
+  src,
+  title = "Mikuru Audio",
+  artist = "Original player component",
+  preload = "metadata"
+} = defineProps({
+  src: String,
+  title: String,
+  artist: String,
+  preload: String
+});
+
+const mediaEl = ref(null);
+const currentTime = ref(0);
+const duration = ref(0);
+const volume = ref(0.75);
+const muted = ref(false);
+const isPlaying = ref(false);
+const safeDuration = computed(() => duration.value > 0 ? duration.value : 0);
+const playLabel = computed(() => isPlaying.value ? "Pause audio" : "Play audio");
+const muteLabel = computed(() => muted.value ? "Unmute audio" : "Mute audio");
+const initials = computed(() => {
+  const words = title.value.split(" ").filter(Boolean);
+  return words.slice(0, 2).map((word) => word[0]).join("").toUpperCase() || "M";
+});
+
+onMounted(() => {
+  applyAudioSettings();
+});
+
+function getMedia() {
+  return mediaEl.value;
+}
+
+function syncMedia() {
+  const media = getMedia();
+  if (!media) return;
+  currentTime.value = media.currentTime || 0;
+  duration.value = Number.isFinite(media.duration) ? media.duration : 0;
+  volume.value = media.volume;
+  muted.value = media.muted;
+}
+
+function applyAudioSettings() {
+  const media = getMedia();
+  if (!media) return;
+  media.volume = volume.value;
+  media.muted = muted.value;
+}
+
+function markPlaying() {
+  isPlaying.value = true;
+}
+
+function markPaused() {
+  isPlaying.value = false;
+}
+
+async function togglePlayback() {
+  const media = getMedia();
+  if (!media) return;
+  if (media.paused) {
+    await media.play();
+    return;
+  }
+  media.pause();
+}
+
+function seek(event) {
+  const media = getMedia();
+  const nextTime = Number(event.target.value);
+  currentTime.value = nextTime;
+  if (media) {
+    media.currentTime = nextTime;
+  }
+}
+
+function setVolume(event) {
+  const nextVolume = Number(event.target.value);
+  volume.value = nextVolume;
+  muted.value = nextVolume === 0;
+  applyAudioSettings();
+}
+
+function toggleMute() {
+  muted.value = !muted.value;
+  applyAudioSettings();
+}
+
+function skipBackward() {
+  skipBy(-10);
+}
+
+function skipForward() {
+  skipBy(10);
+}
+
+function skipBy(offset) {
+  const media = getMedia();
+  if (!media) return;
+  const nextTime = Math.min(Math.max(media.currentTime + offset, 0), safeDuration.value || media.currentTime + offset);
+  media.currentTime = nextTime;
+  currentTime.value = nextTime;
+}
+
+function formatTime(seconds) {
+  const safeSeconds = Number.isFinite(seconds) ? Math.floor(seconds) : 0;
+  const minutes = Math.floor(safeSeconds / 60);
+  const remainder = String(safeSeconds % 60).padStart(2, "0");
+  return minutes + ":" + remainder;
+}
+</script>
+
+<style scoped>
+.mikuru-audio {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  padding: 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #172554;
+  background: #f8fbff;
+}
+
+.art {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  color: #ffffff;
+  background: #0f766e;
+  font-size: 1.45rem;
+  font-weight: 800;
+}
+
+.body,
+.identity {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.identity span,
+.timeline,
+.volume span {
+  color: #64748b;
+  font-size: 0.9rem;
+}
+
+.timeline {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) 42px;
+  gap: 8px;
+  align-items: center;
+}
+
+.timeline span:last-child {
+  text-align: right;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.volume {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+input[type="range"] {
+  accent-color: #0f766e;
+}
+
+button {
+  min-height: 34px;
+  padding: 0 11px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  color: #172554;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: #0f766e;
+}
+
+.primary {
+  border-color: #0f766e;
+  color: #ffffff;
+  background: #0f766e;
+}
+
+@media (max-width: 620px) {
+  .mikuru-audio {
+    grid-template-columns: 1fr;
+  }
+
+  .art {
+    width: 86px;
+  }
+}
+</style>

package/components/MikuruCarousel.mikuru

@@ -0,0 +1,280 @@
+<template>
+  <section class="mikuru-carousel" :aria-label="title" @keydown="handleKeydown" tabindex="0">
+    <div class="carousel-viewport">
+      <div class="carousel-track" :style="trackStyle">
+        <article
+          class="carousel-slide"
+          m-for="slide in normalizedSlides"
+          :key="slide.id"
+          :aria-label="slide.label"
+        >
+          <img :src="slide.src" :alt="slide.alt" />
+          <div class="slide-caption">
+            <strong>{{ slide.title }}</strong>
+            <span>{{ slide.caption }}</span>
+          </div>
+        </article>
+      </div>
+
+      <div m-if="isEmpty" class="carousel-empty">
+        <strong>{{ emptyTitle }}</strong>
+        <span>{{ emptyMessage }}</span>
+      </div>
+
+      <button class="carousel-arrow previous" type="button" @click="previous" aria-label="Previous slide">
+        ‹
+      </button>
+      <button class="carousel-arrow next" type="button" @click="next" aria-label="Next slide">
+        ›
+      </button>
+    </div>
+
+    <div class="carousel-footer">
+      <span>{{ positionLabel }}</span>
+      <div class="carousel-dots" role="tablist" aria-label="Carousel slides">
+        <button
+          m-for="slide in normalizedSlides"
+          :key="slide.id"
+          type="button"
+          :class="{ active: slide.index === activeIndex }"
+          :aria-label="slide.label"
+          @click="goToSlide(slide.index)"
+        ></button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref } from "mikuru";
+
+const {
+  images = [],
+  title = "Mikuru Carousel",
+  autoplay = false,
+  interval = 5000,
+  emptyTitle = "No slides",
+  emptyMessage = "Add images to show the carousel."
+} = defineProps({
+  images: Array,
+  title: String,
+  autoplay: Boolean,
+  interval: Number,
+  emptyTitle: String,
+  emptyMessage: String
+});
+
+const activeIndex = ref(0);
+let timer = null;
+
+const normalizedSlides = computed(() => {
+  const source = Array.isArray(images.value) ? images.value : [];
+  return source.map((item, index) => {
+    const src = typeof item === "string" ? item : item.src;
+    const alt = typeof item === "string" ? "" : item.alt || item.title || `Slide ${index + 1}`;
+    const slideTitle = typeof item === "string" ? `Slide ${index + 1}` : item.title || `Slide ${index + 1}`;
+    const caption = typeof item === "string" ? "" : item.caption || "";
+    return {
+      id: `${src}-${index}`,
+      index,
+      src,
+      alt,
+      title: slideTitle,
+      caption,
+      label: `${slideTitle}, ${index + 1} of ${source.length}`
+    };
+  });
+});
+const slideCount = computed(() => normalizedSlides.value.length);
+const isEmpty = computed(() => slideCount.value === 0);
+const trackStyle = computed(() => ({
+  transform: `translateX(-${activeIndex.value * 100}%)`
+}));
+const positionLabel = computed(() => {
+  if (slideCount.value === 0) return "0 / 0";
+  return `${activeIndex.value + 1} / ${slideCount.value}`;
+});
+
+onMounted(() => {
+  startAutoplay();
+});
+
+onUnmounted(() => {
+  stopAutoplay();
+});
+
+function clampIndex(index) {
+  if (slideCount.value === 0) return 0;
+  if (index < 0) return slideCount.value - 1;
+  if (index >= slideCount.value) return 0;
+  return index;
+}
+
+function goToSlide(index) {
+  activeIndex.value = clampIndex(index);
+  restartAutoplay();
+}
+
+function previous() {
+  goToSlide(activeIndex.value - 1);
+}
+
+function next() {
+  goToSlide(activeIndex.value + 1);
+}
+
+function startAutoplay() {
+  stopAutoplay();
+  if (!autoplay.value || slideCount.value <= 1) return;
+  timer = window.setInterval(() => {
+    activeIndex.value = clampIndex(activeIndex.value + 1);
+  }, Math.max(interval.value, 1000));
+}
+
+function stopAutoplay() {
+  if (timer) {
+    window.clearInterval(timer);
+    timer = null;
+  }
+}
+
+function restartAutoplay() {
+  startAutoplay();
+}
+
+function handleKeydown(event) {
+  if (event.key === "ArrowLeft") {
+    previous();
+    event.preventDefault();
+  } else if (event.key === "ArrowRight") {
+    next();
+    event.preventDefault();
+  } else if (event.key === "Home") {
+    goToSlide(0);
+    event.preventDefault();
+  } else if (event.key === "End") {
+    goToSlide(slideCount.value - 1);
+    event.preventDefault();
+  }
+}
+</script>
+
+<style scoped>
+.mikuru-carousel {
+  display: grid;
+  gap: 10px;
+  color: #111827;
+  outline: none;
+}
+
+.mikuru-carousel:focus-visible {
+  box-shadow: 0 0 0 3px #38bdf8;
+}
+
+.carousel-viewport {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #111827;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 260ms ease;
+}
+
+.carousel-slide {
+  position: relative;
+  flex: 0 0 100%;
+  min-height: 300px;
+  margin: 0;
+}
+
+.carousel-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  object-fit: cover;
+}
+
+.slide-caption {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: grid;
+  gap: 3px;
+  padding: 18px;
+  color: #f8fafc;
+  background: rgb(15 23 42 / 72%);
+}
+
+.slide-caption strong,
+.slide-caption span {
+  overflow-wrap: anywhere;
+}
+
+.carousel-empty {
+  display: grid;
+  min-height: 240px;
+  place-items: center;
+  gap: 4px;
+  color: #cbd5e1;
+}
+
+.carousel-arrow {
+  position: absolute;
+  top: 50%;
+  display: grid;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  font-size: 1.8rem;
+  line-height: 1;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.previous {
+  left: 12px;
+}
+
+.next {
+  right: 12px;
+}
+
+.carousel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #475569;
+  font-size: 0.9rem;
+}
+
+.carousel-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.carousel-dots button {
+  width: 9px;
+  height: 9px;
+  border: 0;
+  border-radius: 999px;
+  padding: 0;
+  background: #94a3b8;
+  cursor: pointer;
+}
+
+.carousel-dots button.active {
+  width: 24px;
+  background: #111827;
+}
+</style>