mikuru 1.0.33 → 1.0.35

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.0.35 - 2026-05-17
+
+- Added package-exported tabs, accordion, form controls, select, combobox, header, footer, and side menu components with typed exports and dogfood coverage.
+- Added a `video-player` create template that imports `MikuruVideoPlayer` from the package and demonstrates quality options, controls, and media events.
+- Improved `MikuruCarousel` with CSS-mask arrow icons, optional thumbnail navigation, hidden thumbnail scrollbars, centered active thumbnails, and a 20-image dogfood gallery case.
+- Updated `MikuruSideMenu` collapse controls to use icon buttons.
+- Added lightweight VS Code-style syntax highlighting to `MikuruCodeBlock` for Mikuru/markup, JavaScript/TypeScript, JSON, and CSS snippets.
+
+## 1.0.34 - 2026-05-16
+
+- Stabilized package component internals so repeated mounts and parent rerenders no longer recreate equivalent derived arrays, Sets, or style objects unnecessarily.
+- Hardened `MikuruCarousel`, `MikuruDropdown`, `MikuruToast`, `MikuruCodeBlock`, and `MikuruVideoPlayer` against recursive update loops when parents pass freshly-created array props with unchanged contents.
+- Switched package component style bindings in `MikuruImageViewer`, `MikuruProgress`, and `MikuruVideoPlayer` to stable string styles to avoid avoidable reactive object churn.
+- Updated `MikuruAudioPlayer` timeline class derivation to return stable class strings.
+
 ## 1.0.33 - 2026-05-16
 
 - Added `MikuruVideoPlayer` sizing props for width, height, and aspect ratio.

package/README.md

@@ -29,12 +29,19 @@ Use the `basic` template when you want a small component composition example:
 npx mikuru create my-basic-app -t basic
 ```
 
+Use the `video-player` template when you want a Vite app that imports the package-provided `MikuruVideoPlayer` component:
+
+```sh
+npx mikuru create my-video-app -t video-player
+```
+
 List available templates:
 
 ```sh
 npx mikuru --list-templates
 starter - minimal Vite app
 basic - component composition example
+video-player - MikuruVideoPlayer media app
 ```
 
 Run a dry-run to preview the target, template, and files without writing them:
@@ -197,6 +204,7 @@ The package also provides the `mikuru` binary:
 ```sh
 npx mikuru create my-app
 npx mikuru create my-basic-app -t basic
+npx mikuru create my-video-app -t video-player
 npx mikuru --list-templates
 ```
 
@@ -274,12 +282,18 @@ The package also includes original Mikuru components:
 - `MikuruAudioPlayer.mikuru`: audio playback with configurable control visibility, live mode, 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.
+- `MikuruCarousel.mikuru`: image carousel with arrows, dots, keyboard navigation, optional autoplay, and optional thumbnail navigation.
 - `MikuruToast.mikuru`: fixed notification stack with timed auto-dismiss, 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.
+- `MikuruTabs.mikuru`: accessible tab list with controlled `m-model`, keyboard navigation, and slot/fallback panels.
+- `MikuruAccordion.mikuru`: single or multiple disclosure panels with controlled `m-model` and slot/fallback content.
+- `MikuruTextInput.mikuru`, `MikuruTextarea.mikuru`, and `MikuruCheckbox.mikuru`: form controls that emit `update:modelValue`.
+- `MikuruSelect.mikuru`: labeled select control with normalized string/object options.
+- `MikuruCombobox.mikuru`: searchable single-select combobox with outside-click and Escape close.
+- `MikuruHeader.mikuru`, `MikuruFooter.mikuru`, and `MikuruSideMenu.mikuru`: app shell layout primitives with normalized navigation items and selection events.
 
 They can be imported from the package:
 
@@ -295,6 +309,16 @@ import MikuruDropdown from "mikuru/components/MikuruDropdown";
 import MikuruToolTip from "mikuru/components/MikuruToolTip";
 import MikuruProgress from "mikuru/components/MikuruProgress";
 import MikuruCodeBlock from "mikuru/components/MikuruCodeBlock";
+import MikuruTabs from "mikuru/components/MikuruTabs";
+import MikuruAccordion from "mikuru/components/MikuruAccordion";
+import MikuruTextInput from "mikuru/components/MikuruTextInput";
+import MikuruTextarea from "mikuru/components/MikuruTextarea";
+import MikuruCheckbox from "mikuru/components/MikuruCheckbox";
+import MikuruSelect from "mikuru/components/MikuruSelect";
+import MikuruCombobox from "mikuru/components/MikuruCombobox";
+import MikuruHeader from "mikuru/components/MikuruHeader";
+import MikuruFooter from "mikuru/components/MikuruFooter";
+import MikuruSideMenu from "mikuru/components/MikuruSideMenu";
 </script>
 ```
 

package/components/MikuruAccordion.mikuru

@@ -0,0 +1,156 @@
+<template>
+  <section class="mikuru-accordion">
+    <details
+      m-for="item in normalizedItems"
+      :key="item.value"
+      class="accordion-item"
+      :class="{ open: isOpen(item.value) }"
+      @toggle="handleToggle(item, $event)"
+    >
+      <summary
+        class="accordion-trigger"
+        :aria-disabled="item.disabled ? 'true' : 'false'"
+        @click="handleSummaryClick(item, $event)"
+      >
+        <span>{{ item.label }}</span>
+        <span aria-hidden="true">{{ isOpen(item.value) ? "-" : "+" }}</span>
+      </summary>
+      <div class="accordion-panel">
+        <slot :item="item">{{ item.panel }}</slot>
+      </div>
+    </details>
+  </section>
+</template>
+
+<script>
+import { ref, watch } from "mikuru";
+
+const {
+  items = [],
+  modelValue = "",
+  multiple = false
+} = defineProps();
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const normalizedItems = ref([]);
+const openValues = ref([]);
+let itemsSignature = "";
+
+watch(items, syncItems, { immediate: true });
+watch(modelValue, syncOpenValues, { immediate: true });
+
+function syncItems() {
+  const source = Array.isArray(items.value) ? items.value : [];
+  const nextItems = source.map((item, index) => {
+    if (typeof item === "string") {
+      return { label: item, value: item, panel: "", disabled: false };
+    }
+    return {
+      label: item.label || `Item ${index + 1}`,
+      value: item.value ?? item.label ?? index,
+      panel: item.panel || "",
+      disabled: Boolean(item.disabled)
+    };
+  });
+  const nextSignature = nextItems
+    .map((item) => `${item.value}\u0000${item.label}\u0000${item.panel}\u0000${item.disabled}`)
+    .join("\u0001");
+  if (nextSignature === itemsSignature) return;
+  itemsSignature = nextSignature;
+  normalizedItems.value = nextItems;
+  syncOpenValues();
+}
+
+function syncOpenValues() {
+  const source = multiple.value
+    ? (Array.isArray(modelValue.value) ? modelValue.value : [])
+    : (modelValue.value === "" || modelValue.value == null ? [] : [modelValue.value]);
+  const availableValues = normalizedItems.value.map((item) => item.value);
+  openValues.value = source.filter((value) => availableValues.some((itemValue) => Object.is(itemValue, value)));
+}
+
+function isOpen(value) {
+  return openValues.value.some((itemValue) => Object.is(itemValue, value));
+}
+
+function handleSummaryClick(item, event) {
+  if (!item.disabled) return;
+  event.preventDefault();
+}
+
+function handleToggle(item, event) {
+  if (item.disabled) {
+    event.target.open = false;
+    return;
+  }
+  if (event.target.open === isOpen(item.value)) return;
+  toggleItem(item);
+}
+
+function toggleItem(item) {
+  let nextValues;
+  if (multiple.value) {
+    nextValues = isOpen(item.value)
+      ? openValues.value.filter((value) => !Object.is(value, item.value))
+      : [...openValues.value, item.value];
+  } else {
+    nextValues = isOpen(item.value) ? [] : [item.value];
+  }
+  openValues.value = nextValues;
+  const payload = multiple.value ? nextValues : nextValues[0] ?? "";
+  emit("update:modelValue", payload);
+  emit("change", payload);
+}
+</script>
+
+<style scoped>
+.mikuru-accordion {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.accordion-item + .accordion-item {
+  border-top: 1px solid #e2e8f0;
+}
+
+.accordion-trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 0;
+  padding: 12px 14px;
+  color: #0f172a;
+  background: #ffffff;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  list-style: none;
+}
+
+.accordion-trigger::-webkit-details-marker {
+  display: none;
+}
+
+.accordion-trigger:hover,
+.accordion-trigger:focus-visible,
+.accordion-item.open .accordion-trigger {
+  background: #f8fafc;
+  outline: none;
+}
+
+.accordion-trigger[aria-disabled="true"] {
+  color: #94a3b8;
+  cursor: not-allowed;
+}
+
+.accordion-panel {
+  padding: 0 14px 14px;
+  color: #475569;
+  line-height: 1.5;
+}
+</style>

package/components/MikuruAudioPlayer.mikuru

@@ -111,10 +111,11 @@ const showSkipControl = computed(() => hasControl("skip"));
 const showMuteControl = computed(() => hasControl("mute"));
 const showVolumeControl = computed(() => hasControl("volume"));
 const showTimeline = computed(() => showSeekControl.value || showTimeControl.value);
-const timelineClass = computed(() => ({
-  "timeline-seek-only": showSeekControl.value && !showTimeControl.value,
-  "timeline-time-only": showTimeControl.value && !showSeekControl.value
-}));
+const timelineClass = computed(() => {
+  if (showSeekControl.value && !showTimeControl.value) return "timeline-seek-only";
+  if (showTimeControl.value && !showSeekControl.value) return "timeline-time-only";
+  return "";
+});
 const showControls = computed(() => (
   showPlayControl.value ||
   showSkipControl.value ||

package/components/MikuruCarousel.mikuru

@@ -4,7 +4,7 @@
       <div class="carousel-track" :style="trackStyle">
         <article
           class="carousel-slide"
-          m-for="slide in normalizedSlides"
+          m-for="slide in slides"
           :key="slide.id"
           :aria-label="slide.label"
         >
@@ -22,10 +22,10 @@
       </div>
 
       <button class="carousel-arrow previous" type="button" @click="previous" aria-label="Previous slide">
-        ‹
+        <span class="carousel-arrow-icon icon-previous" aria-hidden="true"></span>
       </button>
       <button class="carousel-arrow next" type="button" @click="next" aria-label="Next slide">
-        ›
+        <span class="carousel-arrow-icon icon-next" aria-hidden="true"></span>
       </button>
     </div>
 
@@ -33,7 +33,7 @@
       <span>{{ positionLabel }}</span>
       <div class="carousel-dots" role="tablist" aria-label="Carousel slides">
         <button
-          m-for="slide in normalizedSlides"
+          m-for="slide in slides"
           :key="slide.id"
           type="button"
           :class="{ active: slide.index === activeIndex }"
@@ -42,17 +42,43 @@
         ></button>
       </div>
     </div>
+
+    <div m-if="showThumbnails" class="carousel-thumbnail-shell">
+      <button class="thumbnail-scroll previous" type="button" @click="scrollThumbnails(-1)" aria-label="Scroll thumbnails left">
+        <span class="carousel-arrow-icon icon-previous" aria-hidden="true"></span>
+      </button>
+
+      <div ref="thumbnailTrackEl" class="carousel-thumbnails" role="tablist" aria-label="Carousel thumbnails">
+        <button
+          m-for="slide in slides"
+          :key="slide.id"
+          type="button"
+          class="carousel-thumbnail"
+          :class="{ active: slide.index === activeIndex }"
+          :aria-label="slide.label"
+          :aria-selected="slide.index === activeIndex"
+          @click="goToSlide(slide.index)"
+        >
+          <img :src="slide.thumbnail" :alt="slide.alt" />
+        </button>
+      </div>
+
+      <button class="thumbnail-scroll next" type="button" @click="scrollThumbnails(1)" aria-label="Scroll thumbnails right">
+        <span class="carousel-arrow-icon icon-next" aria-hidden="true"></span>
+      </button>
+    </div>
   </section>
 </template>
 
 <script>
-import { computed, onMounted, onUnmounted, ref } from "mikuru";
+import { computed, onMounted, onUnmounted, ref, watch } from "mikuru";
 
 const {
   images = [],
   title = "Mikuru Carousel",
   autoplay = false,
   interval = 5000,
+  thumbnails = false,
   emptyTitle = "No slides",
   emptyMessage = "Add images to show the carousel."
 } = defineProps({
@@ -60,46 +86,67 @@ const {
   title: String,
   autoplay: Boolean,
   interval: Number,
+  thumbnails: Boolean,
   emptyTitle: String,
   emptyMessage: String
 });
 
 const activeIndex = ref(0);
+const slides = ref([]);
+const thumbnailTrackEl = ref(null);
+let slidesSignature = "";
 let timer = null;
+let mounted = false;
 
-const normalizedSlides = computed(() => {
+const slideCount = computed(() => slides.value.length);
+const isEmpty = computed(() => slideCount.value === 0);
+const showThumbnails = computed(() => thumbnails.value && 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}`;
+});
+
+watch(images, syncSlides, { immediate: true });
+
+function syncSlides() {
   const source = Array.isArray(images.value) ? images.value : [];
-  return source.map((item, index) => {
+  const nextSlides = 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 || "";
+    const thumbnail = typeof item === "string" ? item : item.thumbnail || item.src;
     return {
       id: `${src}-${index}`,
       index,
       src,
+      thumbnail,
       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}`;
-});
+  const nextSignature = nextSlides
+    .map((slide) => `${slide.id}\u0000${slide.thumbnail}\u0000${slide.alt}\u0000${slide.title}\u0000${slide.caption}`)
+    .join("\u0001");
+  if (nextSignature === slidesSignature) return;
+  slidesSignature = nextSignature;
+  slides.value = nextSlides;
+  activeIndex.value = clampIndex(activeIndex.value);
+  if (mounted) {
+    startAutoplay();
+  }
+}
 
 onMounted(() => {
+  mounted = true;
   startAutoplay();
 });
 
 onUnmounted(() => {
+  mounted = false;
   stopAutoplay();
 });
 
@@ -112,6 +159,7 @@ function clampIndex(index) {
 
 function goToSlide(index) {
   activeIndex.value = clampIndex(index);
+  centerActiveThumbnail();
   restartAutoplay();
 }
 
@@ -123,6 +171,18 @@ function next() {
   goToSlide(activeIndex.value + 1);
 }
 
+function scrollThumbnails(direction) {
+  goToSlide(activeIndex.value + direction);
+}
+
+function centerActiveThumbnail() {
+  window.setTimeout(() => {
+    const track = thumbnailTrackEl.value;
+    const activeThumbnail = track?.querySelector?.(".carousel-thumbnail.active");
+    activeThumbnail?.scrollIntoView?.({ behavior: "smooth", block: "nearest", inline: "center" });
+  }, 0);
+}
+
 function startAutoplay() {
   stopAutoplay();
   if (!autoplay.value || slideCount.value <= 1) return;
@@ -234,13 +294,29 @@ function handleKeydown(event) {
   border-radius: 999px;
   color: #111827;
   background: #ffffff;
-  font: inherit;
-  font-size: 1.8rem;
-  line-height: 1;
+  padding: 0;
   transform: translateY(-50%);
   cursor: pointer;
 }
 
+.carousel-arrow-icon {
+  display: block;
+  width: 18px;
+  height: 18px;
+  background: currentColor;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.icon-previous {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z"/></svg>');
+}
+
+.icon-next {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"/></svg>');
+}
+
 .previous {
   left: 12px;
 }
@@ -277,4 +353,82 @@ function handleKeydown(event) {
   width: 24px;
   background: #111827;
 }
+
+.carousel-thumbnail-shell {
+  position: relative;
+  display: grid;
+  align-items: center;
+  padding: 0 42px;
+}
+
+.carousel-thumbnails {
+  display: grid;
+  grid-auto-columns: minmax(86px, 1fr);
+  grid-auto-flow: column;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-bottom: 2px;
+}
+
+.carousel-thumbnails::-webkit-scrollbar {
+  display: none;
+}
+
+.carousel-thumbnail {
+  display: block;
+  aspect-ratio: 1;
+  min-width: 86px;
+  overflow: hidden;
+  border: 2px solid transparent;
+  border-radius: 7px;
+  padding: 0;
+  background: #e2e8f0;
+  cursor: pointer;
+}
+
+.carousel-thumbnail:hover,
+.carousel-thumbnail:focus-visible,
+.carousel-thumbnail.active {
+  border-color: #111827;
+  outline: none;
+}
+
+.carousel-thumbnail img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbnail-scroll {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid #cbd5e1;
+  border-radius: 999px;
+  color: #111827;
+  background: #ffffff;
+  box-shadow: 0 8px 24px rgb(15 23 42 / 18%);
+  padding: 0;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.thumbnail-scroll.previous {
+  left: 0;
+}
+
+.thumbnail-scroll.next {
+  right: 0;
+}
+
+.thumbnail-scroll .carousel-arrow-icon {
+  width: 14px;
+  height: 14px;
+}
 </style>

package/components/MikuruCheckbox.mikuru

@@ -0,0 +1,84 @@
+<template>
+  <label class="mikuru-checkbox">
+    <input
+      type="checkbox"
+      :checked="checked"
+      :value="value"
+      :disabled="disabled"
+      @change="updateChecked($event)"
+    />
+    <span>
+      <span class="checkbox-label">{{ label }}</span>
+      <small m-if="description">{{ description }}</small>
+    </span>
+  </label>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  label = "Checkbox",
+  description = "",
+  modelValue = false,
+  value = "on",
+  disabled = false
+} = defineProps();
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const checked = computed(() => {
+  if (Array.isArray(modelValue.value)) {
+    return modelValue.value.some((item) => Object.is(item, value.value));
+  }
+  return Boolean(modelValue.value);
+});
+
+function updateChecked(event) {
+  let nextValue;
+  if (Array.isArray(modelValue.value)) {
+    nextValue = event.target.checked
+      ? [...modelValue.value, value.value]
+      : modelValue.value.filter((item) => !Object.is(item, value.value));
+  } else {
+    nextValue = event.target.checked;
+  }
+  emit("update:modelValue", nextValue);
+  emit("change", nextValue);
+}
+</script>
+
+<style scoped>
+.mikuru-checkbox {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  gap: 9px;
+  align-items: start;
+  color: #0f172a;
+  font: inherit;
+  cursor: pointer;
+}
+
+.mikuru-checkbox input {
+  width: 18px;
+  height: 18px;
+  margin: 2px 0 0;
+  accent-color: #2563eb;
+}
+
+.mikuru-checkbox input:disabled {
+  cursor: not-allowed;
+}
+
+.checkbox-label {
+  display: block;
+  font-weight: 650;
+}
+
+.mikuru-checkbox small {
+  display: block;
+  margin-top: 2px;
+  color: #64748b;
+  line-height: 1.35;
+}
+</style>