tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/mockup-browser.md

@@ -0,0 +1,39 @@
+# mockup-browser
+
+_browser-window chrome wrapper for screenshots_
+
+## What it does
+
+Visual browser-chrome wrapper.
+
+## When to use
+
+- Marketing screenshots, demo previews.
+
+## Examples
+
+### Browser mockup with background color
+
+Source: `playground/components/mockup-browser/browser-mockup-with-background-color.html`
+
+```html
+<div class="mockup-browser border border-base-300 w-full">
+  <div class="mockup-browser-toolbar">
+    <div class="input">https://daisyui.com</div>
+  </div>
+  <div class="grid place-content-center h-80">Hello!</div>
+</div>
+```
+
+### Browser mockup with border
+
+Source: `playground/components/mockup-browser/browser-mockup-with-border.html`
+
+```html
+<div class="mockup-browser border-base-300 border w-full">
+  <div class="mockup-browser-toolbar">
+    <div class="input">https://daisyui.com</div>
+  </div>
+  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
+</div>
+```

package/skill/margaui/components/mockup-code.md

@@ -0,0 +1,81 @@
+# mockup-code
+
+_terminal/code-block visual_
+
+## What it does
+
+Visual code-block / terminal frame with optional line prefix and highlighted line.
+
+## When to use
+
+- Showing code snippets in a styled frame.
+
+## Core classes
+
+`mockup-code`.
+
+## Examples
+
+### Highlighted line
+
+Source: `playground/components/mockup-code/highlighted-line.html`
+
+```html
+<div class="mockup-code w-full">
+  <pre data-prefix="1"><code>npm i daisyui</code></pre>
+  <pre data-prefix="2"><code>installing...</code></pre>
+  <pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre>
+</div>
+```
+
+### Long line will scroll
+
+Source: `playground/components/mockup-code/long-line-will-scroll.html`
+
+```html
+<div class="mockup-code w-full">
+  <pre data-prefix="~"><code>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.</code></pre>
+</div>
+```
+
+### Mockup code with line prefix
+
+Source: `playground/components/mockup-code/mockup-code-with-line-prefix.html`
+
+```html
+<div class="mockup-code w-full">
+  <pre data-prefix="$"><code>npm i daisyui</code></pre>
+</div>
+```
+
+### Multi line
+
+Source: `playground/components/mockup-code/multi-line.html`
+
+```html
+<div class="mockup-code w-full">
+  <pre data-prefix="$"><code>npm i daisyui</code></pre>
+  <pre data-prefix=">" class="text-warning"><code>installing...</code></pre>
+  <pre data-prefix=">" class="text-success"><code>Done!</code></pre>
+</div>
+```
+
+### With color
+
+Source: `playground/components/mockup-code/with-color.html`
+
+```html
+<div class="mockup-code bg-primary text-primary-content w-full">
+  <pre><code>can be any color!</code></pre>
+</div>
+```
+
+### Without prefix
+
+Source: `playground/components/mockup-code/without-prefix.html`
+
+```html
+<div class="mockup-code w-full">
+  <pre><code>without prefix</code></pre>
+</div>
+```

package/skill/margaui/components/mockup-phone.md

@@ -0,0 +1,39 @@
+# mockup-phone
+
+_phone-frame wrapper for screenshots_
+
+## What it does
+
+Visual phone-frame wrapper.
+
+## When to use
+
+- Marketing screenshots showing mobile layouts.
+
+## Examples
+
+### Iphone mockup
+
+Source: `playground/components/mockup-phone/iphone-mockup.html`
+
+```html
+<div class="mockup-phone">
+  <div class="mockup-phone-camera"></div>
+  <div class="mockup-phone-display text-white grid place-content-center bg-neutral-900">
+    It's Glowtime.
+  </div>
+</div>
+```
+
+### With color and wallpaper
+
+Source: `playground/components/mockup-phone/with-color-and-wallpaper.html`
+
+```html
+<div class="mockup-phone border-[#ff8938]">
+  <div class="mockup-phone-camera"></div>
+  <div class="mockup-phone-display">
+    <img alt="wallpaper" src="https://img.daisyui.com/images/stock/453966.webp" />
+  </div>
+</div>
+```

package/skill/margaui/components/mockup-window.md

@@ -0,0 +1,33 @@
+# mockup-window
+
+_OS-window chrome wrapper for screenshots_
+
+## What it does
+
+Visual desktop-window chrome.
+
+## When to use
+
+- Marketing screenshots, demo previews of desktop UIs.
+
+## Examples
+
+### Window mockup with background color
+
+Source: `playground/components/mockup-window/window-mockup-with-background-color.html`
+
+```html
+<div class="mockup-window bg-base-100 border border-base-300 w-full">
+  <div class="grid place-content-center h-80">Hello!</div>
+</div>
+```
+
+### Window mockup with border
+
+Source: `playground/components/mockup-window/window-mockup-with-border.html`
+
+```html
+<div class="mockup-window border border-base-300 w-full">
+  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
+</div>
+```

package/skill/margaui/components/modal.md

@@ -0,0 +1,178 @@
+# modal
+
+_dialog / pop-up (native `<dialog>` or checkbox-driven)_
+
+## What it does
+
+Pop-up dialog. Preferred form is the native `<dialog>` variant; legacy variants use a hidden checkbox or anchor link.
+
+## When to use
+
+- Confirmations, focused tasks that interrupt the page flow.
+- For non-blocking notifications, use **toast** or **alert**.
+- For lighter inline reveals, use **dropdown**.
+
+## Core classes
+
+`modal`; positioning `modal-top|middle|bottom`; inner `modal-box`, `modal-action`, `modal-backdrop`; helper `modal-open`.
+
+## Examples
+
+### Dialog modal closes when clicked outside
+
+Source: `playground/components/modal/dialog-modal-closes-when-clicked-outside.html`
+
+```html
+<!-- Open the modal using ID.showModal() method -->
+<button class="btn" onclick="my_modal_2.showModal()">open modal</button>
+<dialog id="my_modal_2" class="modal">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">Press ESC key or click outside to close</p>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
+```
+
+### Dialog modal with a close button at corner
+
+Source: `playground/components/modal/dialog-modal-with-a-close-button-at-corner.html`
+
+```html
+<!-- You can open the modal using ID.showModal() method -->
+<button class="btn" onclick="my_modal_3.showModal()">open modal</button>
+<dialog id="my_modal_3" class="modal">
+  <div class="modal-box">
+    <form method="dialog">
+      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+    </form>
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">Press ESC key or click on ✕ button to close</p>
+  </div>
+</dialog>
+```
+
+### Dialog modal with custom width
+
+Source: `playground/components/modal/dialog-modal-with-custom-width.html`
+
+```html
+<!-- You can open the modal using ID.showModal() method -->
+<button class="btn" onclick="my_modal_4.showModal()">open modal</button>
+<dialog id="my_modal_4" class="modal">
+  <div class="modal-box w-11/12 max-w-5xl">
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">Click the button below to close</p>
+    <div class="modal-action">
+      <form method="dialog">
+        <!-- if there is a button, it will close the modal -->
+        <button class="btn">Close</button>
+      </form>
+    </div>
+  </div>
+</dialog>
+```
+
+### Dialog modal
+
+Source: `playground/components/modal/dialog-modal.html`
+
+```html
+<!-- Open the modal using ID.showModal() method -->
+<button class="btn" onclick="my_modal_1.showModal()">open modal</button>
+<dialog id="my_modal_1" class="modal">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">Press ESC key or click the button below to close</p>
+    <div class="modal-action">
+      <form method="dialog">
+        <!-- if there is a button in form, it will close the modal -->
+        <button class="btn">Close</button>
+      </form>
+    </div>
+  </div>
+</dialog>
+```
+
+### Modal that closes when clicked outside
+
+Source: `playground/components/modal/modal-that-closes-when-clicked-outside.html`
+
+```html
+<!-- The button to open modal -->
+<label for="my_modal_7" class="btn">open modal</label>
+
+<!-- Put this part before </body> tag -->
+<input type="checkbox" id="my_modal_7" class="modal-toggle" />
+<div class="modal" role="dialog">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">This modal works with a hidden checkbox!</p>
+  </div>
+  <label class="modal-backdrop" for="my_modal_7">Close</label>
+</div>
+```
+
+### Modal using anchor link
+
+Source: `playground/components/modal/modal-using-anchor-link.html`
+
+```html
+<!-- The button to open modal -->
+<a href="#my_modal_8" class="btn">open modal</a>
+
+<!-- Put this part before </body> tag -->
+<div class="modal" role="dialog" id="my_modal_8">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">This modal works with anchor links</p>
+    <div class="modal-action">
+      <a href="#" class="btn">Yay!</a>
+    </div>
+  </div>
+</div>
+```
+
+### Modal using checkbox
+
+Source: `playground/components/modal/modal-using-checkbox.html`
+
+```html
+<!-- The button to open modal -->
+<label for="my_modal_6" class="btn">open modal</label>
+
+<!-- Put this part before </body> tag -->
+<input type="checkbox" id="my_modal_6" class="modal-toggle" />
+<div class="modal" role="dialog">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">This modal works with a hidden checkbox!</p>
+    <div class="modal-action">
+      <label for="my_modal_6" class="btn">Close!</label>
+    </div>
+  </div>
+</div>
+```
+
+### Responsive
+
+Source: `playground/components/modal/responsive.html`
+
+```html
+<!-- Open the modal using ID.showModal() method -->
+<button class="btn" onclick="my_modal_5.showModal()">open modal</button>
+<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Hello!</h3>
+    <p class="py-4">Press ESC key or click the button below to close</p>
+    <div class="modal-action">
+      <form method="dialog">
+        <!-- if there is a button in form, it will close the modal -->
+        <button class="btn">Close</button>
+      </form>
+    </div>
+  </div>
+</dialog>
+```

package/skill/margaui/components/navbar.md

@@ -0,0 +1,282 @@
+# navbar
+
+_top navigation bar with start/center/end slots_
+
+## What it does
+
+Top navigation bar with `navbar-start`, `navbar-center`, `navbar-end` slots.
+
+## When to use
+
+- Top-of-page navigation.
+- For mobile-style bottom nav, use **dock**.
+
+## Examples
+
+### Navbar with colors
+
+Source: `playground/components/navbar/navbar-with-colors.html`
+
+```html
+<div class="navbar bg-neutral text-neutral-content">
+  <button class="btn btn-ghost text-xl">daisyUI</button>
+</div>
+
+<div class="navbar bg-base-300">
+  <button class="btn btn-ghost text-xl">daisyUI</button>
+</div>
+
+<div class="navbar bg-primary text-primary-content">
+  <button class="btn btn-ghost text-xl">daisyUI</button>
+</div>
+```
+
+### Navbar with dropdown center logo and icon
+
+Source: `playground/components/navbar/navbar-with-dropdown-center-logo-and-icon.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <div class="navbar-start">
+    <div class="dropdown">
+      <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
+      </div>
+      <ul
+        tabindex="-1"
+        class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+        <li><a>Homepage</a></li>
+        <li><a>Portfolio</a></li>
+        <li><a>About</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="navbar-center">
+    <a class="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div class="navbar-end">
+    <button class="btn btn-ghost btn-circle">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>
+    </button>
+    <button class="btn btn-ghost btn-circle">
+      <div class="indicator">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
+        <span class="badge badge-xs badge-primary indicator-item"></span>
+      </div>
+    </button>
+  </div>
+</div>
+```
+
+### Navbar with icon at start and end
+
+Source: `playground/components/navbar/navbar-with-icon-at-start-and-end.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <div class="flex-none">
+    <button class="btn btn-square btn-ghost">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg>
+    </button>
+  </div>
+  <div class="flex-1">
+    <a class="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div class="flex-none">
+    <button class="btn btn-square btn-ghost">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path> </svg>
+    </button>
+  </div>
+</div>
+```
+
+### Navbar with icon indicator and dropdown
+
+Source: `playground/components/navbar/navbar-with-icon-indicator-and-dropdown.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <div class="flex-1">
+    <a class="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div class="flex-none">
+    <div class="dropdown dropdown-end">
+      <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+        <div class="indicator">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> </svg>
+          <span class="badge badge-sm indicator-item">8</span>
+        </div>
+      </div>
+      <div
+        tabindex="0"
+        class="card card-compact dropdown-content bg-base-100 z-1 mt-3 w-52 shadow">
+        <div class="card-body">
+          <span class="text-lg font-bold">8 Items</span>
+          <span class="text-info">Subtotal: $999</span>
+          <div class="card-actions">
+            <button class="btn btn-primary btn-block">View cart</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="dropdown dropdown-end">
+      <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+        <div class="w-10 rounded-full">
+          <img
+            alt="Tailwind CSS Navbar component"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+        </div>
+      </div>
+      <ul
+        tabindex="-1"
+        class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+        <li>
+          <a class="justify-between">
+            Profile
+            <span class="badge">New</span>
+          </a>
+        </li>
+        <li><a>Settings</a></li>
+        <li><a>Logout</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+```
+
+### Navbar with menu and submenu
+
+Source: `playground/components/navbar/navbar-with-menu-and-submenu.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <div class="flex-1">
+    <a class="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div class="flex-none">
+    <ul class="menu menu-horizontal px-1">
+      <li><a>Link</a></li>
+      <li>
+        <details>
+          <summary>Parent</summary>
+          <ul class="bg-base-100 rounded-t-none p-2">
+            <li><a>Link 1</a></li>
+            <li><a>Link 2</a></li>
+          </ul>
+        </details>
+      </li>
+    </ul>
+  </div>
+</div>
+```
+
+### Navbar with search input and dropdown
+
+Source: `playground/components/navbar/navbar-with-search-input-and-dropdown.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <div class="flex-1">
+    <a class="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div class="flex gap-2">
+    <input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
+    <div class="dropdown dropdown-end">
+      <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+        <div class="w-10 rounded-full">
+          <img
+            alt="Tailwind CSS Navbar component"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+        </div>
+      </div>
+      <ul
+        tabindex="-1"
+        class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+        <li>
+          <a class="justify-between">
+            Profile
+            <span class="badge">New</span>
+          </a>
+        </li>
+        <li><a>Settings</a></li>
+        <li><a>Logout</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+```
+
+### Navbar with title and icon
+
+Source: `playground/components/navbar/navbar-with-title-and-icon.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <div class="flex-1">
+    <a class="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div class="flex-none">
+    <button class="btn btn-square btn-ghost">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path> </svg>
+    </button>
+  </div>
+</div>
+```
+
+### Navbar with title only
+
+Source: `playground/components/navbar/navbar-with-title-only.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <a class="btn btn-ghost text-xl">daisyUI</a>
+</div>
+```
+
+### Responsive dropdown menu on small screen center menu on large screen
+
+Source: `playground/components/navbar/responsive-dropdown-menu-on-small-screen-center-menu-on-large-screen.html`
+
+```html
+<div class="navbar bg-base-100 shadow-sm">
+  <div class="navbar-start">
+    <div class="dropdown">
+      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
+      </div>
+      <ul
+        tabindex="-1"
+        class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+        <li><a>Item 1</a></li>
+        <li>
+          <a>Parent</a>
+          <ul class="p-2">
+            <li><a>Submenu 1</a></li>
+            <li><a>Submenu 2</a></li>
+          </ul>
+        </li>
+        <li><a>Item 3</a></li>
+      </ul>
+    </div>
+    <a class="btn btn-ghost text-xl">daisyUI</a>
+  </div>
+  <div class="navbar-center hidden lg:flex">
+    <ul class="menu menu-horizontal px-1">
+      <li><a>Item 1</a></li>
+      <li>
+        <details>
+          <summary>Parent</summary>
+          <ul class="p-2 bg-base-100 w-40 z-1">
+            <li><a>Submenu 1</a></li>
+            <li><a>Submenu 2</a></li>
+          </ul>
+        </details>
+      </li>
+      <li><a>Item 3</a></li>
+    </ul>
+  </div>
+  <div class="navbar-end">
+    <a class="btn">Button</a>
+  </div>
+</div>
+```