tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/rating.md

@@ -0,0 +1,170 @@
+# rating
+
+_star / heart rating (radio inputs + masks)_
+
+## What it does
+
+Star/heart rating built from masked radio inputs.
+
+## When to use
+
+- Product / content ratings.
+- For read-only display, set `disabled` on the inputs.
+
+## Core classes
+
+`rating`; size `rating-xs|sm|md|lg|xl`; modifier `rating-half`; child inputs use `mask mask-star|heart|…`.
+
+## Examples
+
+### Rating
+
+Source: `playground/components/rating/rating.html`
+
+```html
+<div class="rating">
+  <input type="radio" name="rating-1" class="mask mask-star" aria-label="1 star" />
+  <input type="radio" name="rating-1" class="mask mask-star" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-1" class="mask mask-star" aria-label="3 star" />
+  <input type="radio" name="rating-1" class="mask mask-star" aria-label="4 star" />
+  <input type="radio" name="rating-1" class="mask mask-star" aria-label="5 star" />
+</div>
+```
+
+### Half stars
+
+Source: `playground/components/rating/half-stars.html`
+
+```html
+<div class="rating rating-lg rating-half">
+  <input type="radio" name="rating-11" class="rating-hidden" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="0.5 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="1 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="1.5 star" checked="checked" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="2 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="2.5 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="3 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="3.5 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="4 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="4.5 star" />
+  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="5 star" />
+</div>
+```
+
+### Mask heart with multiple colors
+
+Source: `playground/components/rating/mask-heart-with-multiple-colors.html`
+
+```html
+<div class="rating gap-1">
+  <input type="radio" name="rating-3" class="mask mask-heart bg-red-400" aria-label="1 star" />
+  <input type="radio" name="rating-3" class="mask mask-heart bg-orange-400" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-3" class="mask mask-heart bg-yellow-400" aria-label="3 star" />
+  <input type="radio" name="rating-3" class="mask mask-heart bg-lime-400" aria-label="4 star" />
+  <input type="radio" name="rating-3" class="mask mask-heart bg-green-400" aria-label="5 star" />
+</div>
+```
+
+### Mask star 2 with green 500 color
+
+Source: `playground/components/rating/mask-star-2-with-green-500-color.html`
+
+```html
+<div class="rating">
+  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="1 star" />
+  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="3 star" />
+  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="4 star" />
+  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="5 star" />
+</div>
+```
+
+### Mask star 2 with warning color
+
+Source: `playground/components/rating/mask-star-2-with-warning-color.html`
+
+```html
+<div class="rating">
+  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
+  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
+  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
+  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
+</div>
+```
+
+### Read only rating
+
+Source: `playground/components/rating/read-only-rating.html`
+
+```html
+<div class="rating">
+  <div class="mask mask-star" aria-label="1 star"></div>
+  <div class="mask mask-star" aria-label="2 star"></div>
+  <div class="mask mask-star" aria-label="3 star" aria-current="true"></div>
+  <div class="mask mask-star" aria-label="4 star"></div>
+  <div class="mask mask-star" aria-label="5 star"></div>
+</div>
+```
+
+### Sizes
+
+Source: `playground/components/rating/sizes.html`
+
+```html
+<!-- xs -->
+<div class="rating rating-xs">
+  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
+  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
+  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
+  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
+</div>
+<!-- sm -->
+<div class="rating rating-sm">
+  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
+  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
+  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
+  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
+</div>
+<!-- md -->
+<div class="rating rating-md">
+  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
+  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
+  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
+  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
+</div>
+<!-- lg -->
+<div class="rating rating-lg">
+  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
+  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
+  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
+  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
+</div>
+<!-- xl -->
+<div class="rating rating-xl">
+  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
+  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
+  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
+  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
+</div>
+```
+
+### With rating hidden
+
+Source: `playground/components/rating/with-rating-hidden.html`
+
+```html
+<div class="rating rating-lg">
+  <input type="radio" name="rating-10" class="rating-hidden" aria-label="clear" />
+  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="1 star" />
+  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="2 star" checked="checked" />
+  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="3 star" />
+  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="4 star" />
+  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="5 star" />
+</div>
+```

package/skill/margaui/components/select.md

@@ -0,0 +1,225 @@
+# select
+
+_styled `<select>`_
+
+## What it does
+
+Themed `<select>` dropdown.
+
+## When to use
+
+- Single-choice form fields with many options.
+- For visible single-choice (few options), use **radio**.
+
+## Core classes
+
+`select`; color `select-primary|secondary|accent|info|success|warning|error|neutral`; style `select-ghost`; size `select-xs|sm|md|lg|xl`.
+
+## Examples
+
+### Select
+
+Source: `playground/components/select/select.html`
+
+```html
+<select class="select">
+  <option disabled selected>Pick a color</option>
+  <option>Crimson</option>
+  <option>Amber</option>
+  <option>Velvet</option>
+</select>
+```
+
+### Accent color
+
+Source: `playground/components/select/accent-color.html`
+
+```html
+<select class="select select-accent">
+  <option selected disabled>Color scheme</option>
+  <option>Light mode</option>
+  <option>Dark mode</option>
+  <option>System</option>
+</select>
+```
+
+### Disabled
+
+Source: `playground/components/select/disabled.html`
+
+```html
+<select class="select" disabled>
+  <option>You can't touch this</option>
+</select>
+```
+
+### Error color
+
+Source: `playground/components/select/error-color.html`
+
+```html
+<select class="select select-error">
+  <option disabled selected>Pick an AI Model</option>
+  <option>GPT-4</option>
+  <option>Claude</option>
+  <option>Llama</option>
+</select>
+```
+
+### Ghost no background
+
+Source: `playground/components/select/ghost-no-background.html`
+
+```html
+<select class="select select-ghost">
+  <option disabled selected>Pick a font</option>
+  <option>Inter</option>
+  <option>Poppins</option>
+  <option>Raleway</option>
+</select>
+```
+
+### Info color
+
+Source: `playground/components/select/info-color.html`
+
+```html
+<select class="select select-info">
+  <option disabled selected>Pick a Framework</option>
+  <option>React</option>
+  <option>Vue</option>
+  <option>Angular</option>
+</select>
+```
+
+### Neutral color
+
+Source: `playground/components/select/neutral-color.html`
+
+```html
+<select class="select select-neutral">
+  <option disabled selected>Server location</option>
+  <option>North America</option>
+  <option>EU west</option>
+  <option>South East Asia</option>
+</select>
+```
+
+### Primary color
+
+Source: `playground/components/select/primary-color.html`
+
+```html
+<select class="select select-primary">
+  <option disabled selected>Pick a text editor</option>
+  <option>VScode</option>
+  <option>VScode fork</option>
+  <option>Another VScode fork</option>
+</select>
+```
+
+### Secondary color
+
+Source: `playground/components/select/secondary-color.html`
+
+```html
+<select class="select select-secondary">
+  <option disabled selected>Pick a language</option>
+  <option>Zig</option>
+  <option>Go</option>
+  <option>Rust</option>
+</select>
+```
+
+### Sizes
+
+Source: `playground/components/select/sizes.html`
+
+```html
+<select class="select select-xs">
+  <option disabled selected>Xsmall</option>
+  <option>Xsmall Apple</option>
+  <option>Xsmall Orange</option>
+  <option>Xsmall Tomato</option>
+</select>
+<select class="select select-sm">
+  <option disabled selected>Small</option>
+  <option>Small Apple</option>
+  <option>Small Orange</option>
+  <option>Small Tomato</option>
+</select>
+<select class="select select-md">
+  <option disabled selected>Medium</option>
+  <option>Medium Apple</option>
+  <option>Medium Orange</option>
+  <option>Medium Tomato</option>
+</select>
+<select class="select select-lg">
+  <option disabled selected>Large</option>
+  <option>Large Apple</option>
+  <option>Large Orange</option>
+  <option>Large Tomato</option>
+</select>
+<select class="select select-xl">
+  <option disabled selected>Xlarge</option>
+  <option>Xlarge Apple</option>
+  <option>Xlarge Orange</option>
+  <option>Xlarge Tomato</option>
+</select>
+```
+
+### Success color
+
+Source: `playground/components/select/success-color.html`
+
+```html
+<select class="select select-success">
+  <option disabled selected>Pick a Runtime</option>
+  <option>npm</option>
+  <option>Bun</option>
+  <option>yarn</option>
+</select>
+```
+
+### Using os native style for the options dropdown
+
+Source: `playground/components/select/using-os-native-style-for-the-options-dropdown.html`
+
+```html
+<select class="select appearance-none">
+  <option disabled selected>Pick a color</option>
+  <option>Crimson</option>
+  <option>Amber</option>
+  <option>Velvet</option>
+</select>
+```
+
+### Warning color
+
+Source: `playground/components/select/warning-color.html`
+
+```html
+<select class="select select-warning">
+  <option disabled selected>Pick an OS</option>
+  <option>Windows</option>
+  <option>MacOS</option>
+  <option>Linux</option>
+</select>
+```
+
+### With fieldset and labels
+
+Source: `playground/components/select/with-fieldset-and-labels.html`
+
+```html
+<fieldset class="fieldset">
+  <legend class="fieldset-legend">Browsers</legend>
+  <select class="select">
+    <option disabled selected>Pick a browser</option>
+    <option>Chrome</option>
+    <option>FireFox</option>
+    <option>Safari</option>
+  </select>
+  <span class="label">Optional</span>
+</fieldset>
+```

package/skill/margaui/components/skeleton.md

@@ -0,0 +1,64 @@
+# skeleton
+
+_shimmering placeholder for loading content_
+
+## What it does
+
+Animated content-shaped placeholder for loading states.
+
+## When to use
+
+- Loading states where you want the layout to pre-fill (lists, cards).
+- For abstract spinners, use **loading**.
+
+## Core classes
+
+`skeleton`.
+
+## Examples
+
+### Skeleton
+
+Source: `playground/components/skeleton/skeleton.html`
+
+```html
+<div class="skeleton h-32 w-32"></div>
+```
+
+### Skeleton —  circle with content
+
+Source: `playground/components/skeleton/skeleton---circle-with-content.html`
+
+```html
+<div class="flex w-52 flex-col gap-4">
+  <div class="flex items-center gap-4">
+    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
+    <div class="flex flex-col gap-4">
+      <div class="skeleton h-4 w-20"></div>
+      <div class="skeleton h-4 w-28"></div>
+    </div>
+  </div>
+  <div class="skeleton h-32 w-full"></div>
+</div>
+```
+
+### Skeleton —  rectangle with content
+
+Source: `playground/components/skeleton/skeleton---rectangle-with-content.html`
+
+```html
+<div class="flex w-52 flex-col gap-4">
+  <div class="skeleton h-32 w-full"></div>
+  <div class="skeleton h-4 w-28"></div>
+  <div class="skeleton h-4 w-full"></div>
+  <div class="skeleton h-4 w-full"></div>
+</div>
+```
+
+### Skeleton text —  animated gradient text
+
+Source: `playground/components/skeleton/skeleton-text---animated-gradient-text.html`
+
+```html
+<span class="skeleton skeleton-text">AI is thinking harder...</span>
+```

package/skill/margaui/components/stack.md

@@ -0,0 +1,142 @@
+# stack
+
+_stack children (Z-axis)_
+
+## What it does
+
+Stacks children on top of each other (Z-axis), with optional offset/spread for card-stack effects.
+
+## When to use
+
+- Stacked-card visual effects, layered images.
+
+## Core classes
+
+`stack`; modifiers `stack-top|start|end` and shadow modifiers.
+
+## Examples
+
+### 3 divs in a stack
+
+Source: `playground/components/stack/3-divs-in-a-stack.html`
+
+```html
+<div class="stack h-20 w-32">
+  <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+  <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+  <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">
+    3
+  </div>
+</div>
+```
+
+### Stacked cards end direction
+
+Source: `playground/components/stack/stacked-cards-end-direction.html`
+
+```html
+<div class="stack stack-end size-28">
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">A</div>
+  </div>
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">B</div>
+  </div>
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">C</div>
+  </div>
+</div>
+```
+
+### Stacked cards start direction
+
+Source: `playground/components/stack/stacked-cards-start-direction.html`
+
+```html
+<div class="stack stack-start size-28">
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">A</div>
+  </div>
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">B</div>
+  </div>
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">C</div>
+  </div>
+</div>
+```
+
+### Stacked cards top direction
+
+Source: `playground/components/stack/stacked-cards-top-direction.html`
+
+```html
+<div class="stack stack-top size-28">
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">A</div>
+  </div>
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">B</div>
+  </div>
+  <div class="border-base-content card bg-base-100 border text-center">
+    <div class="card-body">C</div>
+  </div>
+</div>
+```
+
+### Stacked cards with shadow
+
+Source: `playground/components/stack/stacked-cards-with-shadow.html`
+
+```html
+<div class="stack">
+  <div class="card bg-base-200 text-center shadow-md">
+    <div class="card-body">A</div>
+  </div>
+  <div class="card bg-base-200 text-center shadow">
+    <div class="card-body">B</div>
+  </div>
+  <div class="card bg-base-200 text-center shadow-sm">
+    <div class="card-body">C</div>
+  </div>
+</div>
+```
+
+### Stacked cards
+
+Source: `playground/components/stack/stacked-cards.html`
+
+```html
+<div class="stack">
+  <div class="card shadow-md bg-base-100">
+    <div class="card-body">
+      <h2 class="card-title">Notification 1</h2>
+      <p>You have 3 unread messages. Tap here to see.</p>
+    </div>
+  </div>
+  <div class="card shadow-md bg-base-100">
+    <div class="card-body">
+      <h2 class="card-title">Notification 2</h2>
+      <p>You have 3 unread messages. Tap here to see.</p>
+    </div>
+  </div>
+  <div class="card shadow-md bg-base-100">
+    <div class="card-body">
+      <h2 class="card-title">Notification 3</h2>
+      <p>You have 3 unread messages. Tap here to see.</p>
+    </div>
+  </div>
+</div>
+```
+
+### Stacked images
+
+Source: `playground/components/stack/stacked-images.html`
+
+```html
+<div class="stack w-48">
+  <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="rounded-box" />
+  <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="rounded-box" />
+  <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="rounded-box" />
+</div>
+```