tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/avatar.md

@@ -0,0 +1,220 @@
+# avatar
+
+_user picture / placeholder, with optional ring, mask, presence_
+
+## What it does
+
+User-image container with sizing, rounding, ring, mask shape, presence indicator, and group-stack support.
+
+## When to use
+
+- Anywhere a user/account is represented.
+- Use `avatar-placeholder` when no image is available (renders initials).
+- For decorative shape masking on non-avatar images, use **mask** directly.
+
+## Core classes
+
+`avatar`; modifiers `avatar-group`, `avatar-placeholder`; inner `<img>` typically wrapped in a sized `<div>` with `rounded-full` or a `mask mask-…` class.
+
+## Examples
+
+### Avatar
+
+Source: `playground/components/avatar/avatar.html`
+
+```html
+<div class="avatar">
+  <div class="w-24 rounded">
+    <img src="https://img.daisyui.com/images/profile/demo/batperson@192.webp" />
+  </div>
+</div>
+```
+
+### Avatar group with counter
+
+Source: `playground/components/avatar/avatar-group-with-counter.html`
+
+```html
+<div class="avatar-group -space-x-6">
+  <div class="avatar">
+    <div class="w-12">
+      <img src="https://img.daisyui.com/images/profile/demo/batperson@192.webp" />
+    </div>
+  </div>
+  <div class="avatar">
+    <div class="w-12">
+      <img src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp" />
+    </div>
+  </div>
+  <div class="avatar">
+    <div class="w-12">
+      <img src="https://img.daisyui.com/images/profile/demo/averagebulk@192.webp" />
+    </div>
+  </div>
+  <div class="avatar avatar-placeholder">
+    <div class="bg-neutral text-neutral-content w-12">
+      <span>+99</span>
+    </div>
+  </div>
+</div>
+```
+
+### Avatar group
+
+Source: `playground/components/avatar/avatar-group.html`
+
+```html
+<div class="avatar-group -space-x-6">
+  <div class="avatar">
+    <div class="w-12">
+      <img src="https://img.daisyui.com/images/profile/demo/batperson@192.webp" />
+    </div>
+  </div>
+  <div class="avatar">
+    <div class="w-12">
+      <img src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp" />
+    </div>
+  </div>
+  <div class="avatar">
+    <div class="w-12">
+      <img src="https://img.daisyui.com/images/profile/demo/averagebulk@192.webp" />
+    </div>
+  </div>
+  <div class="avatar">
+    <div class="w-12">
+      <img src="https://img.daisyui.com/images/profile/demo/wonderperson@192.webp" />
+    </div>
+  </div>
+</div>
+```
+
+### Avatar in custom sizes
+
+Source: `playground/components/avatar/avatar-in-custom-sizes.html`
+
+```html
+<div class="avatar">
+  <div class="w-32 rounded">
+    <img src="https://img.daisyui.com/images/profile/demo/superperson@192.webp" />
+  </div>
+</div>
+<div class="avatar">
+  <div class="w-20 rounded">
+    <img
+      src="https://img.daisyui.com/images/profile/demo/superperson@192.webp"
+      alt="Tailwind-CSS-Avatar-component"
+    />
+  </div>
+</div>
+<div class="avatar">
+  <div class="w-16 rounded">
+    <img
+      src="https://img.daisyui.com/images/profile/demo/superperson@192.webp"
+      alt="Tailwind-CSS-Avatar-component"
+    />
+  </div>
+</div>
+<div class="avatar">
+  <div class="w-8 rounded">
+    <img
+      src="https://img.daisyui.com/images/profile/demo/superperson@192.webp"
+      alt="Tailwind-CSS-Avatar-component"
+    />
+  </div>
+</div>
+```
+
+### Avatar placeholder
+
+Source: `playground/components/avatar/avatar-placeholder.html`
+
+```html
+<div class="avatar avatar-placeholder">
+  <div class="bg-neutral text-neutral-content w-24 rounded-full">
+    <span class="text-3xl">D</span>
+  </div>
+</div>
+<div class="avatar avatar-online avatar-placeholder">
+  <div class="bg-neutral text-neutral-content w-16 rounded-full">
+    <span class="text-xl">AI</span>
+  </div>
+</div>
+<div class="avatar avatar-placeholder">
+  <div class="bg-neutral text-neutral-content w-12 rounded-full">
+    <span>SY</span>
+  </div>
+</div>
+<div class="avatar avatar-placeholder">
+  <div class="bg-neutral text-neutral-content w-8 rounded-full">
+    <span class="text-xs">UI</span>
+  </div>
+</div>
+```
+
+### Avatar rounded
+
+Source: `playground/components/avatar/avatar-rounded.html`
+
+```html
+<div class="avatar">
+  <div class="w-24 rounded-xl">
+    <img src="https://img.daisyui.com/images/profile/demo/yellingwoman@192.webp" />
+  </div>
+</div>
+<div class="avatar">
+  <div class="w-24 rounded-full">
+    <img src="https://img.daisyui.com/images/profile/demo/yellingcat@192.webp" />
+  </div>
+</div>
+```
+
+### Avatar with mask
+
+Source: `playground/components/avatar/avatar-with-mask.html`
+
+```html
+<div class="avatar">
+  <div class="mask mask-heart w-24">
+    <img src="https://img.daisyui.com/images/profile/demo/distracted3@192.webp" />
+  </div>
+</div>
+<div class="avatar">
+  <div class="mask mask-squircle w-24">
+    <img src="https://img.daisyui.com/images/profile/demo/distracted1@192.webp" />
+  </div>
+</div>
+<div class="avatar">
+  <div class="mask mask-hexagon-2 w-24">
+    <img src="https://img.daisyui.com/images/profile/demo/distracted2@192.webp" />
+  </div>
+</div>
+```
+
+### Avatar with presence indicator
+
+Source: `playground/components/avatar/avatar-with-presence-indicator.html`
+
+```html
+<div class="avatar avatar-online">
+  <div class="w-24 rounded-full">
+    <img src="https://img.daisyui.com/images/profile/demo/gordon@192.webp" />
+  </div>
+</div>
+<div class="avatar avatar-offline">
+  <div class="w-24 rounded-full">
+    <img src="https://img.daisyui.com/images/profile/demo/idiotsandwich@192.webp" />
+  </div>
+</div>
+```
+
+### Avatar with ring
+
+Source: `playground/components/avatar/avatar-with-ring.html`
+
+```html
+<div class="avatar">
+  <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring-2 ring-offset-2">
+    <img src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp" />
+  </div>
+</div>
+```

package/skill/margaui/components/badge.md

@@ -0,0 +1,193 @@
+# badge
+
+_small label / counter chip_
+
+## What it does
+
+Small chip used for counts, statuses, tags, or labels.
+
+## When to use
+
+- Inline with text or as a counter on buttons / icons.
+- For a colored dot only (no text), use **status** instead.
+- For positioned overlays on other elements, wrap in **indicator**.
+
+## Core classes
+
+`badge`; color `badge-primary|secondary|accent|info|success|warning|error|neutral|ghost`; style `badge-outline|dash|soft`; size `badge-xs|sm|md|lg|xl`.
+
+## Examples
+
+### Badge
+
+Source: `playground/components/badge/badge.html`
+
+```html
+<span class="badge">Badge</span>
+```
+
+### Badge ghost
+
+Source: `playground/components/badge/badge-ghost.html`
+
+```html
+<div class="badge badge-ghost">ghost</div>
+```
+
+### Badge in a button
+
+Source: `playground/components/badge/badge-in-a-button.html`
+
+```html
+<button class="btn">
+  Inbox <div class="badge badge-sm">+99</div>
+</button>
+
+<button class="btn">
+  Inbox <div class="badge badge-sm badge-secondary">+99</div>
+</button>
+```
+
+### Badge in a text
+
+Source: `playground/components/badge/badge-in-a-text.html`
+
+```html
+<h1 class="text-xl font-semibold">
+  Heading 1 <span class="badge badge-xl">Badge</span>
+</h1>
+
+<h2 class="text-lg font-semibold">
+  Heading 2 <span class="badge badge-lg">Badge</span>
+</h2>
+
+<h3 class="text-base font-semibold">
+  Heading 3 <span class="badge badge-md">Badge</span>
+</h3>
+
+<h4 class="text-sm font-semibold">
+  Heading 4 <span class="badge badge-sm">Badge</span>
+</h4>
+
+<h5 class="text-xs font-semibold">
+  Heading 5 <span class="badge badge-xs">Badge</span>
+</h5>
+
+<p class="text-xs">
+  Paragraph <span class="badge badge-xs">Badge</span>
+</p>
+```
+
+### Badge sizes
+
+Source: `playground/components/badge/badge-sizes.html`
+
+```html
+<div class="badge badge-xs">Xsmall</div>
+<div class="badge badge-sm">Small</div>
+<div class="badge badge-md">Medium</div>
+<div class="badge badge-lg">Large</div>
+<div class="badge badge-xl">Xlarge</div>
+```
+
+### Badge with colors
+
+Source: `playground/components/badge/badge-with-colors.html`
+
+```html
+<div class="badge badge-primary">Primary</div>
+<div class="badge badge-secondary">Secondary</div>
+<div class="badge badge-accent">Accent</div>
+<div class="badge badge-neutral">Neutral</div>
+<div class="badge badge-info">Info</div>
+<div class="badge badge-success">Success</div>
+<div class="badge badge-warning">Warning</div>
+<div class="badge badge-error">Error</div>
+```
+
+### Badge with dash style
+
+Source: `playground/components/badge/badge-with-dash-style.html`
+
+```html
+<div class="badge badge-dash badge-primary">Primary</div>
+<div class="badge badge-dash badge-secondary">Secondary</div>
+<div class="badge badge-dash badge-accent">Accent</div>
+<div class="badge badge-dash badge-info">Info</div>
+<div class="badge badge-dash badge-success">Success</div>
+<div class="badge badge-dash badge-warning">Warning</div>
+<div class="badge badge-dash badge-error">Error</div>
+```
+
+### Badge with icon
+
+Source: `playground/components/badge/badge-with-icon.html`
+
+```html
+<div class="badge badge-info">
+  <svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m12,17v-5.5c0-.276-.224-.5-.5-.5h-1.5" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><circle cx="12" cy="7.25" r="1.25" fill="currentColor" stroke-width="2"></circle></g></svg>
+  Info
+</div>
+<div class="badge badge-success">
+  <svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><polyline points="7 13 10 16 17 8" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></polyline></g></svg>
+  Success
+</div>
+<div class="badge badge-warning">
+  <svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><g fill="currentColor"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="9" y1="6.5" x2="9" y2="10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg>
+  Warning
+</div>
+<div class="badge badge-error">
+  <svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor"><rect x="1.972" y="11" width="20.056" height="2" transform="translate(-4.971 12) rotate(-45)" fill="currentColor" stroke-width="0"></rect><path d="m12,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm0-20C7.038,3,3,7.037,3,12s4.038,9,9,9,9-4.037,9-9S16.962,3,12,3Z" stroke-width="0" fill="currentColor"></path></g></svg>
+  Error
+</div>
+```
+
+### Badge with outline style
+
+Source: `playground/components/badge/badge-with-outline-style.html`
+
+```html
+<div class="badge badge-outline badge-primary">Primary</div>
+<div class="badge badge-outline badge-secondary">Secondary</div>
+<div class="badge badge-outline badge-accent">Accent</div>
+<div class="badge badge-outline badge-info">Info</div>
+<div class="badge badge-outline badge-success">Success</div>
+<div class="badge badge-outline badge-warning">Warning</div>
+<div class="badge badge-outline badge-error">Error</div>
+```
+
+### Badge with soft style
+
+Source: `playground/components/badge/badge-with-soft-style.html`
+
+```html
+<div class="badge badge-soft badge-primary">Primary</div>
+<div class="badge badge-soft badge-secondary">Secondary</div>
+<div class="badge badge-soft badge-accent">Accent</div>
+<div class="badge badge-soft badge-info">Info</div>
+<div class="badge badge-soft badge-success">Success</div>
+<div class="badge badge-soft badge-warning">Warning</div>
+<div class="badge badge-soft badge-error">Error</div>
+```
+
+### Empty badge
+
+Source: `playground/components/badge/empty-badge.html`
+
+```html
+<div class="badge badge-primary badge-lg"></div>
+<div class="badge badge-primary badge-md"></div>
+<div class="badge badge-primary badge-sm"></div>
+<div class="badge badge-primary badge-xs"></div>
+```
+
+### Neutral badge with outline or dash style
+
+Source: `playground/components/badge/neutral-badge-with-outline-or-dash-style.html`
+
+```html
+<div class="bg-white p-6">
+  <div class="badge badge-neutral badge-outline">Outline</div>
+  <div class="badge badge-neutral badge-dash">Dash</div>
+</div>
+```

package/skill/margaui/components/breadcrumbs.md

@@ -0,0 +1,103 @@
+# breadcrumbs
+
+_path-style navigation trail_
+
+## What it does
+
+Horizontal trail of links showing the user's location in a hierarchy.
+
+## When to use
+
+- Pages nested 2+ levels deep where users may want to jump back to an ancestor.
+- Skip on flat / single-level UIs.
+
+## Examples
+
+### Breadcrumbs
+
+Source: `playground/components/breadcrumbs/breadcrumbs.html`
+
+```html
+<div class="breadcrumbs text-sm">
+  <ul>
+    <li><a>Home</a></li>
+    <li><a>Documents</a></li>
+    <li>Add Document</li>
+  </ul>
+</div>
+```
+
+### Breadcrumbs with icons
+
+Source: `playground/components/breadcrumbs/breadcrumbs-with-icons.html`
+
+```html
+<div class="breadcrumbs text-sm">
+  <ul>
+    <li>
+      <a>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="h-4 w-4 stroke-current">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+        </svg>
+        Home
+      </a>
+    </li>
+    <li>
+      <a>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="h-4 w-4 stroke-current">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+        </svg>
+        Documents
+      </a>
+    </li>
+    <li>
+      <span class="inline-flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="h-4 w-4 stroke-current">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+        </svg>
+        Add Document
+      </span>
+    </li>
+  </ul>
+</div>
+```
+
+### Breadcrumbs with max width
+
+Source: `playground/components/breadcrumbs/breadcrumbs-with-max-width.html`
+
+```html
+<div class="breadcrumbs max-w-xs text-sm">
+  <ul>
+    <li>Long text 1</li>
+    <li>Long text 2</li>
+    <li>Long text 3</li>
+    <li>Long text 4</li>
+    <li>Long text 5</li>
+  </ul>
+</div>
+```