tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/label.md

@@ -0,0 +1,102 @@
+# label
+
+_input label (inline or floating)_
+
+## What it does
+
+Themed label, including a floating-label variant.
+
+## When to use
+
+- Labelling form inputs.
+
+## Core classes
+
+`label`, `floating-label`.
+
+## Examples
+
+### Floating label with different sizes
+
+Source: `playground/components/label/floating-label-with-different-sizes.html`
+
+```html
+<label class="floating-label">
+  <input type="text" placeholder="Extra Small" class="input input-xs" />
+  <span>Extra Small</span>
+</label>
+<label class="floating-label">
+  <input type="text" placeholder="Small" class="input input-sm" />
+  <span>Small</span>
+</label>
+<label class="floating-label">
+  <input type="text" placeholder="Medium" class="input input-md" />
+  <span>Medium</span>
+</label>
+<label class="floating-label">
+  <input type="text" placeholder="Large" class="input input-lg" />
+  <span>Large</span>
+</label>
+<label class="floating-label">
+  <input type="text" placeholder="Extra Large" class="input input-xl" />
+  <span>Extra Large</span>
+</label>
+```
+
+### Floating label
+
+Source: `playground/components/label/floating-label.html`
+
+```html
+<label class="floating-label">
+  <span>Your Email</span>
+  <input type="text" placeholder="mail@site.com" class="input input-md" />
+</label>
+```
+
+### Label for date input
+
+Source: `playground/components/label/label-for-date-input.html`
+
+```html
+<label class="input">
+  <span class="label">Publish date</span>
+  <input type="date" />
+</label>
+```
+
+### Label for input at the end
+
+Source: `playground/components/label/label-for-input-at-the-end.html`
+
+```html
+<label class="input">
+  <input type="text" placeholder="domain name" />
+  <span class="label">.com</span>
+</label>
+```
+
+### Label for input
+
+Source: `playground/components/label/label-for-input.html`
+
+```html
+<label class="input">
+  <span class="label">https://</span>
+  <input type="text" placeholder="URL" />
+</label>
+```
+
+### Label for select
+
+Source: `playground/components/label/label-for-select.html`
+
+```html
+<label class="select">
+  <span class="label">Type</span>
+  <select>
+    <option>Personal</option>
+    <option>Business</option>
+  </select>
+</label>
+```

package/skill/margaui/components/link.md

@@ -0,0 +1,96 @@
+# link
+
+_themed `<a>`_
+
+## What it does
+
+Themed inline link.
+
+## When to use
+
+- Inline anchors in body text.
+- For action-style links rendered as buttons, use **button** with `btn-link`.
+
+## Core classes
+
+`link`; color `link-primary|secondary|accent|info|success|warning|error`; modifier `link-hover` (underline only on hover).
+
+## Examples
+
+### Link
+
+Source: `playground/components/link/link.html`
+
+```html
+<p>
+  Tailwind CSS resets the style of links by default.
+  <br />
+  Add "link" class to make it look like a
+  <a class="link">normal link</a>
+  again.
+</p>
+```
+
+### Accent color
+
+Source: `playground/components/link/accent-color.html`
+
+```html
+<a class="link link-accent">Click me</a>
+```
+
+### Error color
+
+Source: `playground/components/link/error-color.html`
+
+```html
+<a class="link link-error">Click me</a>
+```
+
+### Info color
+
+Source: `playground/components/link/info-color.html`
+
+```html
+<a class="link link-info">Click me</a>
+```
+
+### Primary color
+
+Source: `playground/components/link/primary-color.html`
+
+```html
+<a class="link link-primary">Click me</a>
+```
+
+### Secondary color
+
+Source: `playground/components/link/secondary-color.html`
+
+```html
+<a class="link link-secondary">Click me</a>
+```
+
+### Show underline only on hover
+
+Source: `playground/components/link/show-underline-only-on-hover.html`
+
+```html
+<a class="link link-hover">Click me</a>
+```
+
+### Success color
+
+Source: `playground/components/link/success-color.html`
+
+```html
+<a class="link link-success">Click me</a>
+```
+
+### Warning color
+
+Source: `playground/components/link/warning-color.html`
+
+```html
+<a class="link link-warning">Click me</a>
+```

package/skill/margaui/components/list.md

@@ -0,0 +1,182 @@
+# list
+
+_vertical list with grid-style columns_
+
+## What it does
+
+Vertical list where each row is a multi-column layout (image + text + actions).
+
+## When to use
+
+- Compact rows of records (chat list, file list, settings list).
+
+## Core classes
+
+`list`; row `list-row`; modifiers `list-col-grow`, `list-col-wrap`.
+
+## Examples
+
+### List second column grows —  default
+
+Source: `playground/components/list/list-second-column-grows---default.html`
+
+```html
+<ul class="list bg-base-100 rounded-box shadow-md">
+  
+  <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
+  
+  <li class="list-row">
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+    <div>
+      <div>Dio Lupa</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+    </div>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+    </button>
+  </li>
+  
+  <li class="list-row">
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
+    <div>
+      <div>Ellie Beilish</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
+    </div>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+    </button>
+  </li>
+  
+  <li class="list-row">
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
+    <div>
+      <div>Sabrino Gardener</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
+    </div>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+    </button>
+  </li>
+  
+</ul>
+```
+
+### List third column grows
+
+Source: `playground/components/list/list-third-column-grows.html`
+
+```html
+<ul class="list bg-base-100 rounded-box shadow-md">
+  
+  <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
+  
+  <li class="list-row">
+    <div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+    <div class="list-col-grow">
+      <div>Dio Lupa</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+    </div>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+  </li>
+  
+  <li class="list-row">
+    <div class="text-4xl font-thin opacity-30 tabular-nums">02</div>
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
+    <div class="list-col-grow">
+      <div>Ellie Beilish</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
+    </div>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+  </li>
+  
+  <li class="list-row">
+    <div class="text-4xl font-thin opacity-30 tabular-nums">03</div>
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
+    <div class="list-col-grow">
+      <div>Sabrino Gardener</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
+    </div>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+  </li>
+  
+</ul>
+```
+
+### List third column wraps to next row
+
+Source: `playground/components/list/list-third-column-wraps-to-next-row.html`
+
+```html
+<ul class="list bg-base-100 rounded-box shadow-md">
+  
+  <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
+  
+  <li class="list-row">
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+    <div>
+      <div>Dio Lupa</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+    </div>
+    <p class="list-col-wrap text-xs">
+      "Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
+    </p>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+    </button>
+  </li>
+  
+  <li class="list-row">
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
+    <div>
+      <div>Ellie Beilish</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
+    </div>
+    <p class="list-col-wrap text-xs">
+      "Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.
+    </p>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+    </button>
+  </li>
+  
+  <li class="list-row">
+    <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
+    <div>
+      <div>Sabrino Gardener</div>
+      <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
+    </div>
+    <p class="list-col-wrap text-xs">
+      "Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.
+    </p>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
+    </button>
+    <button class="btn btn-square btn-ghost">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+    </button>
+  </li>
+  
+</ul>
+```

package/skill/margaui/components/loading.md

@@ -0,0 +1,105 @@
+# loading
+
+_loading spinner / dots / bars / ring / ball / infinity_
+
+## What it does
+
+Inline loading indicator with several visual styles.
+
+## When to use
+
+- Pending async operations, skeleton-less loading states.
+- For content-shaped placeholders, use **skeleton**.
+
+## Core classes
+
+`loading`; style `loading-spinner|dots|ring|ball|bars|infinity`; size `loading-xs|sm|md|lg|xl`; color via standard `text-primary|…` utilities.
+
+## Examples
+
+### Loading ball
+
+Source: `playground/components/loading/loading-ball.html`
+
+```html
+<span class="loading loading-ball loading-xs"></span>
+<span class="loading loading-ball loading-sm"></span>
+<span class="loading loading-ball loading-md"></span>
+<span class="loading loading-ball loading-lg"></span>
+<span class="loading loading-ball loading-xl"></span>
+```
+
+### Loading bars
+
+Source: `playground/components/loading/loading-bars.html`
+
+```html
+<span class="loading loading-bars loading-xs"></span>
+<span class="loading loading-bars loading-sm"></span>
+<span class="loading loading-bars loading-md"></span>
+<span class="loading loading-bars loading-lg"></span>
+<span class="loading loading-bars loading-xl"></span>
+```
+
+### Loading dots
+
+Source: `playground/components/loading/loading-dots.html`
+
+```html
+<span class="loading loading-dots loading-xs"></span>
+<span class="loading loading-dots loading-sm"></span>
+<span class="loading loading-dots loading-md"></span>
+<span class="loading loading-dots loading-lg"></span>
+<span class="loading loading-dots loading-xl"></span>
+```
+
+### Loading infinity
+
+Source: `playground/components/loading/loading-infinity.html`
+
+```html
+<span class="loading loading-infinity loading-xs"></span>
+<span class="loading loading-infinity loading-sm"></span>
+<span class="loading loading-infinity loading-md"></span>
+<span class="loading loading-infinity loading-lg"></span>
+<span class="loading loading-infinity loading-xl"></span>
+```
+
+### Loading ring
+
+Source: `playground/components/loading/loading-ring.html`
+
+```html
+<span class="loading loading-ring loading-xs"></span>
+<span class="loading loading-ring loading-sm"></span>
+<span class="loading loading-ring loading-md"></span>
+<span class="loading loading-ring loading-lg"></span>
+<span class="loading loading-ring loading-xl"></span>
+```
+
+### Loading spinner
+
+Source: `playground/components/loading/loading-spinner.html`
+
+```html
+<span class="loading loading-spinner loading-xs"></span>
+<span class="loading loading-spinner loading-sm"></span>
+<span class="loading loading-spinner loading-md"></span>
+<span class="loading loading-spinner loading-lg"></span>
+<span class="loading loading-spinner loading-xl"></span>
+```
+
+### Loading with colors
+
+Source: `playground/components/loading/loading-with-colors.html`
+
+```html
+<span class="loading loading-spinner text-primary"></span>
+<span class="loading loading-spinner text-secondary"></span>
+<span class="loading loading-spinner text-accent"></span>
+<span class="loading loading-spinner text-neutral"></span>
+<span class="loading loading-spinner text-info"></span>
+<span class="loading loading-spinner text-success"></span>
+<span class="loading loading-spinner text-warning"></span>
+<span class="loading loading-spinner text-error"></span>
+```

package/skill/margaui/components/mask.md

@@ -0,0 +1,168 @@
+# mask
+
+_clip an element to a shape (circle, hex, star, …)_
+
+## What it does
+
+CSS mask utilities to clip an element (typically an image) to a shape.
+
+## When to use
+
+- Decorative image shaping, avatar shaping.
+- For avatars specifically, use **avatar** (which composes mask).
+
+## Core classes
+
+`mask`; shape `mask-circle|squircle|square|heart|hexagon|hexagon-2|decagon|pentagon|diamond|star|star-2|triangle|triangle-2|triangle-3|triangle-4`.
+
+## Examples
+
+### Circle
+
+Source: `playground/components/mask/circle.html`
+
+```html
+<img
+  class="mask mask-circle"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Decagon
+
+Source: `playground/components/mask/decagon.html`
+
+```html
+<img
+  class="mask mask-decagon"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Diamond
+
+Source: `playground/components/mask/diamond.html`
+
+```html
+<img
+  class="mask mask-diamond"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Heart
+
+Source: `playground/components/mask/heart.html`
+
+```html
+<img
+  class="mask mask-heart"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Hexagon 2 horizontal hexagon
+
+Source: `playground/components/mask/hexagon-2-horizontal-hexagon.html`
+
+```html
+<img
+  class="mask mask-hexagon-2"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Hexagon
+
+Source: `playground/components/mask/hexagon.html`
+
+```html
+<img
+  class="mask mask-hexagon"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Pentagon
+
+Source: `playground/components/mask/pentagon.html`
+
+```html
+<img
+  class="mask mask-pentagon"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Square
+
+Source: `playground/components/mask/square.html`
+
+```html
+<img
+  class="mask mask-square"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Squircle
+
+Source: `playground/components/mask/squircle.html`
+
+```html
+<img
+  class="mask mask-squircle"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Star 2 bold star
+
+Source: `playground/components/mask/star-2-bold-star.html`
+
+```html
+<img
+  class="mask mask-star-2"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Star
+
+Source: `playground/components/mask/star.html`
+
+```html
+<img
+  class="mask mask-star"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Triangle 2 pointing down
+
+Source: `playground/components/mask/triangle-2-pointing-down.html`
+
+```html
+<img
+  class="mask mask-triangle-2"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Triangle 3 pointing left
+
+Source: `playground/components/mask/triangle-3-pointing-left.html`
+
+```html
+<img
+  class="mask mask-triangle-3"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Triangle 4 pointing right
+
+Source: `playground/components/mask/triangle-4-pointing-right.html`
+
+```html
+<img
+  class="mask mask-triangle-4"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```
+
+### Triangle pointing top
+
+Source: `playground/components/mask/triangle-pointing-top.html`
+
+```html
+<img
+  class="mask mask-triangle"
+  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+```