tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/carousel.md

@@ -0,0 +1,387 @@
+# carousel
+
+_horizontal/vertical scroll-snap slideshow_
+
+## What it does
+
+CSS scroll-snap based slideshow. No JS required; navigation via anchor links to `id`-tagged items.
+
+## When to use
+
+- Image galleries or feature walkthroughs where the user controls pacing.
+- For purely hover-driven image switching, use **hover-gallery**.
+
+## Core classes
+
+`carousel`; modifiers `carousel-start|center|end`, `carousel-vertical`; items use `carousel-item`.
+
+## Examples
+
+### Carousel with full width items
+
+Source: `playground/components/carousel/carousel-with-full-width-items.html`
+
+```html
+<div class="carousel rounded-box w-64">
+  <div class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
+      class="w-full"
+      alt="Tailwind CSS Carousel component" />
+  </div>
+  <div class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
+      class="w-full"
+      alt="Tailwind CSS Carousel component" />
+  </div>
+  <div class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
+      class="w-full"
+      alt="Tailwind CSS Carousel component" />
+  </div>
+  <div class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
+      class="w-full"
+      alt="Tailwind CSS Carousel component" />
+  </div>
+  <div class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
+      class="w-full"
+      alt="Tailwind CSS Carousel component" />
+  </div>
+  <div class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
+      class="w-full"
+      alt="Tailwind CSS Carousel component" />
+  </div>
+  <div class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
+      class="w-full"
+      alt="Tailwind CSS Carousel component" />
+  </div>
+</div>
+```
+
+### Carousel with half width items
+
+Source: `playground/components/carousel/carousel-with-half-width-items.html`
+
+```html
+<div class="carousel rounded-box w-96">
+  <div class="carousel-item w-1/2">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
+      class="w-full" />
+  </div>
+  <div class="carousel-item w-1/2">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
+      class="w-full" />
+  </div>
+  <div class="carousel-item w-1/2">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
+      class="w-full" />
+  </div>
+  <div class="carousel-item w-1/2">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
+      class="w-full" />
+  </div>
+  <div class="carousel-item w-1/2">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
+      class="w-full" />
+  </div>
+  <div class="carousel-item w-1/2">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
+      class="w-full" />
+  </div>
+  <div class="carousel-item w-1/2">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
+      class="w-full" />
+  </div>
+</div>
+```
+
+### Carousel with indicator buttons
+
+Source: `playground/components/carousel/carousel-with-indicator-buttons.html`
+
+```html
+<div class="carousel w-full">
+  <div id="item1" class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp"
+      class="w-full" />
+  </div>
+  <div id="item2" class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
+      class="w-full" />
+  </div>
+  <div id="item3" class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp"
+      class="w-full" />
+  </div>
+  <div id="item4" class="carousel-item w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp"
+      class="w-full" />
+  </div>
+</div>
+<div class="flex w-full justify-center gap-2 py-2">
+  <a href="#item1" class="btn btn-xs">1</a>
+  <a href="#item2" class="btn btn-xs">2</a>
+  <a href="#item3" class="btn btn-xs">3</a>
+  <a href="#item4" class="btn btn-xs">4</a>
+</div>
+```
+
+### Carousel with nextprev buttons
+
+Source: `playground/components/carousel/carousel-with-nextprev-buttons.html`
+
+```html
+<div class="carousel w-full">
+  <div id="slide1" class="carousel-item relative w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp"
+      class="w-full" />
+    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+      <a href="#slide4" class="btn btn-circle">❮</a>
+      <a href="#slide2" class="btn btn-circle">❯</a>
+    </div>
+  </div>
+  <div id="slide2" class="carousel-item relative w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
+      class="w-full" />
+    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+      <a href="#slide1" class="btn btn-circle">❮</a>
+      <a href="#slide3" class="btn btn-circle">❯</a>
+    </div>
+  </div>
+  <div id="slide3" class="carousel-item relative w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp"
+      class="w-full" />
+    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+      <a href="#slide2" class="btn btn-circle">❮</a>
+      <a href="#slide4" class="btn btn-circle">❯</a>
+    </div>
+  </div>
+  <div id="slide4" class="carousel-item relative w-full">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp"
+      class="w-full" />
+    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+      <a href="#slide3" class="btn btn-circle">❮</a>
+      <a href="#slide1" class="btn btn-circle">❯</a>
+    </div>
+  </div>
+</div>
+```
+
+### Full bleed carousel
+
+Source: `playground/components/carousel/full-bleed-carousel.html`
+
+```html
+<div class="carousel carousel-center bg-neutral rounded-box max-w-md space-x-4 p-4">
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
+      class="rounded-box" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
+      class="rounded-box" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
+      class="rounded-box" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
+      class="rounded-box" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
+      class="rounded-box" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
+      class="rounded-box" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
+      class="rounded-box" />
+  </div>
+</div>
+```
+
+### Snap to center
+
+Source: `playground/components/carousel/snap-to-center.html`
+
+```html
+<div class="carousel carousel-center rounded-box">
+  <div class="carousel-item">
+    <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="Pizza" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
+      alt="Pizza" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
+      alt="Pizza" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
+      alt="Pizza" />
+  </div>
+  <div class="carousel-item">
+    <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" alt="Pizza" />
+  </div>
+  <div class="carousel-item">
+    <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" alt="Pizza" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
+      alt="Pizza" />
+  </div>
+</div>
+```
+
+### Snap to end
+
+Source: `playground/components/carousel/snap-to-end.html`
+
+```html
+<div class="carousel carousel-end rounded-box">
+  <div class="carousel-item">
+    <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="Drink" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
+      alt="Drink" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
+      alt="Drink" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
+      alt="Drink" />
+  </div>
+  <div class="carousel-item">
+    <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" alt="Drink" />
+  </div>
+  <div class="carousel-item">
+    <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" alt="Drink" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
+      alt="Drink" />
+  </div>
+</div>
+```
+
+### Snap to start default
+
+Source: `playground/components/carousel/snap-to-start-default.html`
+
+```html
+<div class="carousel rounded-box">
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
+      alt="Burger" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
+      alt="Burger" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
+      alt="Burger" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
+      alt="Burger" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
+      alt="Burger" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
+      alt="Burger" />
+  </div>
+  <div class="carousel-item">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
+      alt="Burger" />
+  </div>
+</div>
+```
+
+### Vertical carousel
+
+Source: `playground/components/carousel/vertical-carousel.html`
+
+```html
+<div class="carousel carousel-vertical rounded-box h-96">
+  <div class="carousel-item h-full">
+    <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" />
+  </div>
+  <div class="carousel-item h-full">
+    <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" />
+  </div>
+  <div class="carousel-item h-full">
+    <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" />
+  </div>
+  <div class="carousel-item h-full">
+    <img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" />
+  </div>
+  <div class="carousel-item h-full">
+    <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" />
+  </div>
+  <div class="carousel-item h-full">
+    <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" />
+  </div>
+  <div class="carousel-item h-full">
+    <img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" />
+  </div>
+</div>
+```

package/skill/margaui/components/chat.md

@@ -0,0 +1,171 @@
+# chat
+
+_chat bubble (start/end alignment)_
+
+## What it does
+
+Speech-bubble layout for messaging UIs, with optional avatar, header, footer.
+
+## When to use
+
+- Conversation transcripts (chat apps, AI chat UIs).
+
+## Core classes
+
+`chat chat-start|chat-end`; inner `chat-image`, `chat-header`, `chat-bubble`, `chat-footer`; bubble color via `chat-bubble-primary|secondary|accent|info|success|warning|error`.
+
+## Examples
+
+### Chat bubble with colors
+
+Source: `playground/components/chat/chat-bubble-with-colors.html`
+
+```html
+<div class="chat chat-start">
+  <div class="chat-bubble chat-bubble-primary">What kind of nonsense is this</div>
+</div>
+<div class="chat chat-start">
+  <div class="chat-bubble chat-bubble-secondary">
+    Put me on the Council and not make me a Master!??
+  </div>
+</div>
+<div class="chat chat-start">
+  <div class="chat-bubble chat-bubble-accent">
+    That's never been done in the history of the Jedi.
+  </div>
+</div>
+<div class="chat chat-start">
+  <div class="chat-bubble chat-bubble-neutral">It's insulting!</div>
+</div>
+<div class="chat chat-end">
+  <div class="chat-bubble chat-bubble-info">Calm down, Anakin.</div>
+</div>
+<div class="chat chat-end">
+  <div class="chat-bubble chat-bubble-success">You have been given a great honor.</div>
+</div>
+<div class="chat chat-end">
+  <div class="chat-bubble chat-bubble-warning">To be on the Council at your age.</div>
+</div>
+<div class="chat chat-end">
+  <div class="chat-bubble chat-bubble-error">It's never happened before.</div>
+</div>
+```
+
+### Chat start and chat end
+
+Source: `playground/components/chat/chat-start-and-chat-end.html`
+
+```html
+<div class="chat chat-start">
+  <div class="chat-bubble">
+    It's over Anakin,
+    <br />
+    I have the high ground.
+  </div>
+</div>
+<div class="chat chat-end">
+  <div class="chat-bubble">You underestimate my power!</div>
+</div>
+```
+
+### Chat with header and footer
+
+Source: `playground/components/chat/chat-with-header-and-footer.html`
+
+```html
+<div class="chat chat-start">
+  <div class="chat-header">
+    Obi-Wan Kenobi
+    <time class="text-xs opacity-50">2 hours ago</time>
+  </div>
+  <div class="chat-bubble">You were the Chosen One!</div>
+  <div class="chat-footer opacity-50">Seen</div>
+</div>
+<div class="chat chat-start">
+  <div class="chat-header">
+    Obi-Wan Kenobi
+    <time class="text-xs opacity-50">2 hour ago</time>
+  </div>
+  <div class="chat-bubble">I loved you.</div>
+  <div class="chat-footer opacity-50">Delivered</div>
+</div>
+```
+
+### Chat with image header and footer
+
+Source: `playground/components/chat/chat-with-image-header-and-footer.html`
+
+```html
+<div class="chat chat-start">
+  <div class="chat-image avatar">
+    <div class="w-10 rounded-full">
+      <img
+        alt="Tailwind CSS chat bubble component"
+        src="https://img.daisyui.com/images/profile/demo/kenobee@192.webp"
+      />
+    </div>
+  </div>
+  <div class="chat-header">
+    Obi-Wan Kenobi
+    <time class="text-xs opacity-50">12:45</time>
+  </div>
+  <div class="chat-bubble">You were the Chosen One!</div>
+  <div class="chat-footer opacity-50">Delivered</div>
+</div>
+<div class="chat chat-end">
+  <div class="chat-image avatar">
+    <div class="w-10 rounded-full">
+      <img
+        alt="Tailwind CSS chat bubble component"
+        src="https://img.daisyui.com/images/profile/demo/anakeen@192.webp"
+      />
+    </div>
+  </div>
+  <div class="chat-header">
+    Anakin
+    <time class="text-xs opacity-50">12:46</time>
+  </div>
+  <div class="chat-bubble">I hate you!</div>
+  <div class="chat-footer opacity-50">Seen at 12:46</div>
+</div>
+```
+
+### Chat with image
+
+Source: `playground/components/chat/chat-with-image.html`
+
+```html
+<div class="chat chat-start">
+  <div class="chat-image avatar">
+    <div class="w-10 rounded-full">
+      <img
+        alt="Tailwind CSS chat bubble component"
+        src="https://img.daisyui.com/images/profile/demo/kenobee@192.webp"
+      />
+    </div>
+  </div>
+  <div class="chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
+</div>
+<div class="chat chat-start">
+  <div class="chat-image avatar">
+    <div class="w-10 rounded-full">
+      <img
+        alt="Tailwind CSS chat bubble component"
+        src="https://img.daisyui.com/images/profile/demo/kenobee@192.webp"
+      />
+    </div>
+  </div>
+  <div class="chat-bubble">It was you who would bring balance to the Force</div>
+</div>
+<div class="chat chat-start">
+  <div class="chat-image avatar">
+    <div class="w-10 rounded-full">
+      <img
+        alt="Tailwind CSS chat bubble component"
+        src="https://img.daisyui.com/images/profile/demo/kenobee@192.webp"
+      />
+    </div>
+  </div>
+  <div class="chat-bubble">Not leave it in Darkness</div>
+</div>
+```

package/skill/margaui/components/checkbox.md

@@ -0,0 +1,101 @@
+# checkbox
+
+_styled `<input type="checkbox">`_
+
+## What it does
+
+Themed replacement for the native checkbox.
+
+## When to use
+
+- Multi-select / boolean form fields.
+- For a sliding on/off switch, use **toggle**.
+
+## Core classes
+
+`checkbox`; color `checkbox-primary|secondary|accent|info|success|warning|error|neutral`; size `checkbox-xs|sm|md|lg|xl`.
+
+## Examples
+
+### Checkbox
+
+Source: `playground/components/checkbox/checkbox.html`
+
+```html
+<input type="checkbox" checked="checked" class="checkbox" />
+```
+
+### Checkbox with custom colors
+
+Source: `playground/components/checkbox/checkbox-with-custom-colors.html`
+
+```html
+<input
+  type="checkbox"
+  checked="checked"
+  class="checkbox border-indigo-600 bg-indigo-500 checked:border-orange-500 checked:bg-orange-400 checked:text-orange-800"
+/>
+```
+
+### Colors
+
+Source: `playground/components/checkbox/colors.html`
+
+```html
+<input type="checkbox" checked="checked" class="checkbox checkbox-primary" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-secondary" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-accent" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-neutral" />
+
+<input type="checkbox" checked="checked" class="checkbox checkbox-info" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-success" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-warning" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-error" />
+```
+
+### Disabled
+
+Source: `playground/components/checkbox/disabled.html`
+
+```html
+<input type="checkbox" class="checkbox" disabled />
+<input type="checkbox" class="checkbox" disabled checked="checked" />
+```
+
+### Indeterminate
+
+Source: `playground/components/checkbox/indeterminate.html`
+
+```html
+<!-- You can make a checkbox indeterminate using JS -->
+<script>
+  document.getElementById("my-checkbox").indeterminate = true
+</script>
+<input type="checkbox" class="checkbox" id="my-checkbox" />
+```
+
+### Sizes
+
+Source: `playground/components/checkbox/sizes.html`
+
+```html
+<input type="checkbox" checked="checked" class="checkbox checkbox-xs" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-sm" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-md" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-lg" />
+<input type="checkbox" checked="checked" class="checkbox checkbox-xl" />
+```
+
+### With fieldset and label
+
+Source: `playground/components/checkbox/with-fieldset-and-label.html`
+
+```html
+<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
+  <legend class="fieldset-legend">Login options</legend>
+  <label class="label">
+    <input type="checkbox" checked="checked" class="checkbox" />
+    Remember me
+  </label>
+</fieldset>
+```