npm - tutuca - Versions diffs - 0.11.1 → 0.11.2 - Mend

tutuca 0.11.1 → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/dist/tutuca-dev.ext.js +6 -1
package/dist/tutuca-dev.js +6 -1
package/dist/tutuca-dev.min.js +1 -1
package/package.json +1 -1
package/skill/margaui/SKILL.md +0 -105
package/skill/margaui/components/accordion.md +0 -127
package/skill/margaui/components/alert.md +0 -174
package/skill/margaui/components/aura.md +0 -97
package/skill/margaui/components/avatar.md +0 -220
package/skill/margaui/components/badge.md +0 -193
package/skill/margaui/components/breadcrumbs.md +0 -103
package/skill/margaui/components/button.md +0 -322
package/skill/margaui/components/calendar.md +0 -67
package/skill/margaui/components/card.md +0 -373
package/skill/margaui/components/carousel.md +0 -387
package/skill/margaui/components/chat.md +0 -171
package/skill/margaui/components/checkbox.md +0 -101
package/skill/margaui/components/collapse.md +0 -172
package/skill/margaui/components/countdown.md +0 -165
package/skill/margaui/components/diff.md +0 -53
package/skill/margaui/components/divider.md +0 -107
package/skill/margaui/components/dock.md +0 -173
package/skill/margaui/components/drawer.md +0 -184
package/skill/margaui/components/dropdown.md +0 -388
package/skill/margaui/components/fab.md +0 -346
package/skill/margaui/components/fieldset.md +0 -88
package/skill/margaui/components/file-input.md +0 -84
package/skill/margaui/components/filter.md +0 -52
package/skill/margaui/components/footer.md +0 -583
package/skill/margaui/components/hero.md +0 -135
package/skill/margaui/components/hover-3d.md +0 -129
package/skill/margaui/components/hover-gallery.md +0 -49
package/skill/margaui/components/indicator.md +0 -265
package/skill/margaui/components/input.md +0 -389
package/skill/margaui/components/join.md +0 -100
package/skill/margaui/components/kbd.md +0 -127
package/skill/margaui/components/label.md +0 -102
package/skill/margaui/components/link.md +0 -96
package/skill/margaui/components/list.md +0 -182
package/skill/margaui/components/loading.md +0 -105
package/skill/margaui/components/mask.md +0 -168
package/skill/margaui/components/megamenu.md +0 -131
package/skill/margaui/components/menu.md +0 -887
package/skill/margaui/components/mockup-browser.md +0 -39
package/skill/margaui/components/mockup-code.md +0 -81
package/skill/margaui/components/mockup-phone.md +0 -39
package/skill/margaui/components/mockup-window.md +0 -33
package/skill/margaui/components/modal.md +0 -196
package/skill/margaui/components/navbar.md +0 -282
package/skill/margaui/components/otp.md +0 -171
package/skill/margaui/components/pagination.md +0 -122
package/skill/margaui/components/progress.md +0 -135
package/skill/margaui/components/radial-progress.md +0 -67
package/skill/margaui/components/radio.md +0 -133
package/skill/margaui/components/range.md +0 -134
package/skill/margaui/components/rating.md +0 -170
package/skill/margaui/components/select.md +0 -225
package/skill/margaui/components/skeleton.md +0 -64
package/skill/margaui/components/stack.md +0 -142
package/skill/margaui/components/stat.md +0 -254
package/skill/margaui/components/status.md +0 -73
package/skill/margaui/components/steps.md +0 -138
package/skill/margaui/components/swap.md +0 -152
package/skill/margaui/components/tab.md +0 -248
package/skill/margaui/components/table.md +0 -1018
package/skill/margaui/components/text-rotate.md +0 -91
package/skill/margaui/components/textarea.md +0 -85
package/skill/margaui/components/theme-controller.md +0 -266
package/skill/margaui/components/timeline.md +0 -1356
package/skill/margaui/components/toast.md +0 -165
package/skill/margaui/components/toggle.md +0 -135
package/skill/margaui/components/tooltip.md +0 -181
package/skill/margaui/components/validator.md +0 -163
package/skill/tutuca/SKILL.md +0 -56
package/skill/tutuca/advanced.md +0 -212
package/skill/tutuca/cli.md +0 -239
package/skill/tutuca/component-design.md +0 -168
package/skill/tutuca/core.md +0 -910
package/skill/tutuca/iteration.md +0 -207
package/skill/tutuca/macros.md +0 -86
package/skill/tutuca/margaui.md +0 -175
package/skill/tutuca/messages-and-intents.md +0 -399
package/skill/tutuca/patterns/README.md +0 -48
package/skill/tutuca/patterns/add-a-story.md +0 -26
package/skill/tutuca/patterns/bind-text-and-attributes.md +0 -30
package/skill/tutuca/patterns/conditional-attribute-value.md +0 -29
package/skill/tutuca/patterns/coordinate-components.md +0 -54
package/skill/tutuca/patterns/edit-through-a-dynamic-target.md +0 -27
package/skill/tutuca/patterns/enrich-each-item.md +0 -25
package/skill/tutuca/patterns/file-input.md +0 -39
package/skill/tutuca/patterns/filter-a-list.md +0 -25
package/skill/tutuca/patterns/filter-and-paginate.md +0 -60
package/skill/tutuca/patterns/handle-events.md +0 -38
package/skill/tutuca/patterns/iterate-a-list.md +0 -18
package/skill/tutuca/patterns/paginate-a-list.md +0 -29
package/skill/tutuca/patterns/render-a-child-component.md +0 -21
package/skill/tutuca/patterns/reuse-markup-with-macros.md +0 -36
package/skill/tutuca/patterns/share-state-across-the-tree.md +0 -38
package/skill/tutuca/patterns/show-or-hide-content.md +0 -23
package/skill/tutuca/patterns/switch-between-views.md +0 -30
package/skill/tutuca/patterns/tabbed-interface.md +0 -43
package/skill/tutuca/semantics.md +0 -195
package/skill/tutuca/storybook.md +0 -270
package/skill/tutuca/styles.md +0 -48
package/skill/tutuca/testing.md +0 -346
package/skill/tutuca-source/SKILL.md +0 -33
package/skill/tutuca-source/tutuca.ext.js +0 -4244

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "tutuca",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "type": "module",
   "description": "SPA framework with Immer-powered immutable state and virtual DOM",
   "main": "./dist/tutuca.js",

package/skill/margaui/SKILL.md DELETED Viewed

@@ -1,105 +0,0 @@
----
-name: margaui
-description: Use when writing HTML/CSS that uses the margaui component library — Tailwind v4 utility classes like `btn`, `card`, `alert`, `modal`, `navbar`, `dropdown`, `toast`, themes via `data-theme`. margaui is API-compatible with daisyUI, so this skill also applies when working with daisyUI markup. Provides per-component usage notes and copy-paste examples.
----
-# margaui
-margaui is a Tailwind v4–native CSS component library: 68 components defined as Tailwind v4 `@utility` classes, plus 35 themes selected via `data-theme` on any ancestor element.
-## Relationship to daisyUI
-margaui is **API-compatible with [daisyUI](https://daisyui.com/)** and currently tracks **daisyUI v5.6.6**. The class names (`btn`, `btn-primary`, `card`, `card-body`, `alert-info`, `modal-box`, `dropdown-content`, …), modifier vocabulary, and DOM structure mirror daisyUI. Differences are implementation-level (Tailwind v4 native, in-browser compiler, `@supports` fallbacks for `color-mix`), not API-level.
-Practical implication: **daisyUI documentation and examples are valid references** when this skill doesn't cover something. If a component is documented for daisyUI, the same markup works in margaui.
-## Themes
-Set on any element (most often `<html>` or `<body>`):
-```html
-<html data-theme="dracula">
-```
-`light` is the default — applied via `:root` and `:host`, so pages work without an explicit `data-theme`. 35 themes available: `abyss`, `acid`, `aqua`, `autumn`, `black`, `bumblebee`, `business`, `caramellatte`, `cmyk`, `coffee`, `corporate`, `cupcake`, `cyberpunk`, `dark`, `dim`, `dracula`, `emerald`, `fantasy`, `forest`, `garden`, `halloween`, `lemonade`, `light`, `lofi`, `luxury`, `night`, `nord`, `pastel`, `retro`, `silk`, `sunset`, `synthwave`, `valentine`, `winter`, `wireframe`.
-## Conventions across components
-- **Theme-driven colors.** Use semantic color utilities (`bg-base-100`, `bg-base-200`, `text-base-content`, `text-primary`, `bg-primary`, `text-primary-content`, etc.) rather than hard-coded palette colors — this keeps components correct across all 35 themes.
-- **Modifier suffixes are consistent.** Most components share the same vocabulary: color (`-primary`, `-secondary`, `-accent`, `-info`, `-success`, `-warning`, `-error`, `-neutral`, `-ghost`), style (`-outline`, `-soft`, `-dash`), size (`-xs`, `-sm`, `-md`, `-lg`, `-xl`), state (`-active`, `-disabled`).
-- **Tailwind utilities work normally.** Responsive prefixes (`sm:`, `md:`, …), state variants (`hover:`, `focus:`, …), and arbitrary values all compose with margaui classes.
-- **`@utility` classes, not `@apply`.** Internally components are defined with Tailwind v4's `@utility` directive, so they tree-shake on demand and can be combined freely.
-- **Color modifiers are generated, not hand-written.** A component's color variants (`btn-primary`, `badge-success`, `alert-info`, …) resolve from the theme's 16 semantic colors via Tailwind v4's `--value(--color-*)`, so one definition per component covers every color and tracks the active `data-theme`.
-## Component index
-Read the linked file when the user's task involves that component. Each file has _What it does_, _When to use_, _Core classes_, and copy-paste HTML examples drawn from `playground/components/<name>/`.
-- [accordion](components/accordion.md) — collapsible sections (single-open via radio, free via details)
-- [alert](components/alert.md) — inline notification box (info / success / warning / error)
-- [aura](components/aura.md) — animated glowing border wrapper (rainbow, holo, dual, silver, gold, glow)
-- [avatar](components/avatar.md) — user picture / placeholder, with optional ring, mask, presence
-- [badge](components/badge.md) — small label / counter chip
-- [breadcrumbs](components/breadcrumbs.md) — path-style navigation trail
-- [button](components/button.md) — `btn` with color / size / shape / style modifiers
-- [calendar](components/calendar.md) — date picker (uses external Cally web component)
-- [card](components/card.md) — container with figure, body, title, actions
-- [carousel](components/carousel.md) — horizontal/vertical scroll-snap slideshow
-- [chat](components/chat.md) — chat bubble (start/end alignment)
-- [checkbox](components/checkbox.md) — styled `<input type="checkbox">`
-- [collapse](components/collapse.md) — single show/hide region (details/summary or checkbox)
-- [countdown](components/countdown.md) — animated digit transitions for timers / clocks
-- [diff](components/diff.md) — side-by-side image/text comparison with draggable handle
-- [divider](components/divider.md) — horizontal / vertical separator with optional label
-- [dock](components/dock.md) — bottom navigation bar (mobile-style)
-- [drawer](components/drawer.md) — off-canvas sidebar (toggle via checkbox)
-- [dropdown](components/dropdown.md) — click/hover/focus menu attached to a trigger
-- [fab](components/fab.md) — floating action button (single or speed-dial)
-- [fieldset](components/fieldset.md) — themed `<fieldset>` group with legend + label slots
-- [file-input](components/file-input.md) — styled file picker
-- [filter](components/filter.md) — radio-button filter group (with reset)
-- [footer](components/footer.md) — page footer with column groupings
-- [hero](components/hero.md) — full-width banner section (centered or with figure)
-- [hover-3d](components/hover-3d.md) — 3D tilt effect on hover (cards / images)
-- [hover-gallery](components/hover-gallery.md) — swap images by hovering across regions
-- [indicator](components/indicator.md) — wrap an element to overlay a badge / status / button at a corner
-- [input](components/input.md) — themed text-style input wrapper
-- [join](components/join.md) — group adjacent items so borders/radii merge
-- [kbd](components/kbd.md) — keyboard-key visual
-- [label](components/label.md) — input label (inline or floating)
-- [link](components/link.md) — themed `<a>`
-- [list](components/list.md) — vertical list with grid-style columns
-- [loading](components/loading.md) — loading spinner / dots / bars / ring / ball / infinity
-- [mask](components/mask.md) — clip an element to a shape (circle, hex, star, …)
-- [megamenu](components/megamenu.md) — large horizontal nav bar whose items open big popover panels
-- [menu](components/menu.md) — vertical/horizontal nav list (sidebar, sub-menus)
-- [mockup-browser](components/mockup-browser.md) — browser-window chrome wrapper for screenshots
-- [mockup-code](components/mockup-code.md) — terminal/code-block visual
-- [mockup-phone](components/mockup-phone.md) — phone-frame wrapper for screenshots
-- [mockup-window](components/mockup-window.md) — OS-window chrome wrapper for screenshots
-- [modal](components/modal.md) — dialog / pop-up (native `<dialog>` or checkbox-driven)
-- [navbar](components/navbar.md) — top navigation bar with start/center/end slots
-- [otp](components/otp.md) — one-time-password digit input (2FA / verification codes)
-- [pagination](components/pagination.md) — paged-navigation button row
-- [progress](components/progress.md) — linear progress bar (`<progress>`)
-- [radial-progress](components/radial-progress.md) — circular progress indicator
-- [radio](components/radio.md) — styled `<input type="radio">`
-- [range](components/range.md) — styled `<input type="range">` slider
-- [rating](components/rating.md) — star / heart rating (radio inputs + masks)
-- [select](components/select.md) — styled `<select>`
-- [skeleton](components/skeleton.md) — shimmering placeholder for loading content
-- [stack](components/stack.md) — stack children (Z-axis)
-- [stat](components/stat.md) — KPI / metric tile (title + value + desc)
-- [status](components/status.md) — small colored status dot
-- [steps](components/steps.md) — multi-step progress indicator
-- [swap](components/swap.md) — toggle between two children (icon swap, hamburger)
-- [tab](components/tab.md) — tabbed content (radio inputs or anchors)
-- [table](components/table.md) — themed `<table>` (zebra, hover, pinned rows/cols, sizes)
-- [text-rotate](components/text-rotate.md) — cycle through words in place (CSS animation)
-- [textarea](components/textarea.md) — styled `<textarea>`
-- [theme-controller](components/theme-controller.md) — checkbox / radio / dropdown that switches `data-theme`
-- [timeline](components/timeline.md) — vertical or horizontal event timeline
-- [toast](components/toast.md) — fixed-position notification stack (corner overlays)
-- [toggle](components/toggle.md) — on/off switch (styled checkbox)
-- [tooltip](components/tooltip.md) — hover/focus tooltip on any element
-- [validator](components/validator.md) — show validation message tied to a form input

package/skill/margaui/components/accordion.md DELETED Viewed

@@ -1,127 +0,0 @@
-# accordion
-_collapsible sections (single-open via radio, free via details)_
-## What it does
-Vertically stacked, expandable sections that show one panel of content at a time.
-## When to use
-- Grouped FAQ-style content where most items stay collapsed.
-- For a single show/hide region without grouping, use **collapse** instead.
-## Core classes
-`collapse` on each item, all sharing the same `name="…"` (radio inputs) for single-open behavior; modifiers `collapse-arrow`, `collapse-plus`, `join-item` when wrapped in `join`.
-## Examples
-### Accordion using details
-Source: `playground/components/accordion/accordion-using-details.html`
-```html
-<details class="collapse bg-base-100 border border-base-300" name="my-accordion-det-1" open>
-  <summary class="collapse-title font-semibold">How do I create an account?</summary>
-  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
-</details>
-<details class="collapse bg-base-100 border border-base-300" name="my-accordion-det-1">
-  <summary class="collapse-title font-semibold">I forgot my password. What should I do?</summary>
-  <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
-</details>
-<details class="collapse bg-base-100 border border-base-300" name="my-accordion-det-1">
-  <summary class="collapse-title font-semibold">How do I update my profile information?</summary>
-  <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
-</details>
-```
-### Accordion using radio inputs
-Source: `playground/components/accordion/accordion-using-radio-inputs.html`
-```html
-<div class="collapse bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-1" checked="checked" />
-  <div class="collapse-title font-semibold">How do I create an account?</div>
-  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
-</div>
-<div class="collapse bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-1" />
-  <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
-  <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
-</div>
-<div class="collapse bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-1" />
-  <div class="collapse-title font-semibold">How do I update my profile information?</div>
-  <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
-</div>
-```
-### Accordion with arrow icon
-Source: `playground/components/accordion/accordion-with-arrow-icon.html`
-```html
-<div class="collapse collapse-arrow bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-2" checked="checked" />
-  <div class="collapse-title font-semibold">How do I create an account?</div>
-  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
-</div>
-<div class="collapse collapse-arrow bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-2" />
-  <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
-  <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
-</div>
-<div class="collapse collapse-arrow bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-2" />
-  <div class="collapse-title font-semibold">How do I update my profile information?</div>
-  <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
-</div>
-```
-### Accordion with plusminus icon
-Source: `playground/components/accordion/accordion-with-plusminus-icon.html`
-```html
-<div class="collapse collapse-plus bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-3" checked="checked" />
-  <div class="collapse-title font-semibold">How do I create an account?</div>
-  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
-</div>
-<div class="collapse collapse-plus bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-3" />
-  <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
-  <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
-</div>
-<div class="collapse collapse-plus bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-3" />
-  <div class="collapse-title font-semibold">How do I update my profile information?</div>
-  <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
-</div>
-```
-### Using accordion and join together
-Source: `playground/components/accordion/using-accordion-and-join-together.html`
-```html
-<div class="join join-vertical bg-base-100">
-  <div class="collapse collapse-arrow join-item border-base-300 border">
-    <input type="radio" name="my-accordion-4" checked="checked" />
-    <div class="collapse-title font-semibold">How do I create an account?</div>
-    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
-  </div>
-  <div class="collapse collapse-arrow join-item border-base-300 border">
-    <input type="radio" name="my-accordion-4" />
-    <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
-    <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
-  </div>
-  <div class="collapse collapse-arrow join-item border-base-300 border">
-    <input type="radio" name="my-accordion-4" />
-    <div class="collapse-title font-semibold">How do I update my profile information?</div>
-    <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
-  </div>
-</div>
-```

package/skill/margaui/components/alert.md DELETED Viewed

@@ -1,174 +0,0 @@
-# alert
-_inline notification box (info / success / warning / error)_
-## What it does
-Inline, non-blocking notification box with an icon and message, optionally with action buttons.
-## When to use
-- Persistent feedback inline with content (form errors, status banners).
-- For transient pop-ups that auto-dismiss, use **toast** instead.
-## Core classes
-`alert`; color `alert-info|success|warning|error`; style `alert-outline|dash|soft`; usually paired with `role="alert"`.
-## Examples
-### Alert
-Source: `playground/components/alert/alert.html`
-```html
-<div role="alert" class="alert">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-  </svg>
-  <span>12 unread messages. Tap to see.</span>
-</div>
-```
-### Alert dash style
-Source: `playground/components/alert/alert-dash-style.html`
-```html
-<div role="alert" class="alert alert-info alert-dash">
-  <span>12 unread messages. Tap to see.</span>
-</div>
-<div role="alert" class="alert alert-success alert-dash">
-  <span>Your purchase has been confirmed!</span>
-</div>
-<div role="alert" class="alert alert-warning alert-dash">
-  <span>Warning: Invalid email address!</span>
-</div>
-<div role="alert" class="alert alert-error alert-dash">
-  <span>Error! Task failed successfully.</span>
-</div>
-```
-### Alert outline style
-Source: `playground/components/alert/alert-outline-style.html`
-```html
-<div role="alert" class="alert alert-info alert-outline">
-  <span>12 unread messages. Tap to see.</span>
-</div>
-<div role="alert" class="alert alert-success alert-outline">
-  <span>Your purchase has been confirmed!</span>
-</div>
-<div role="alert" class="alert alert-warning alert-outline">
-  <span>Warning: Invalid email address!</span>
-</div>
-<div role="alert" class="alert alert-error alert-outline">
-  <span>Error! Task failed successfully.</span>
-</div>
-```
-### Alert soft style
-Source: `playground/components/alert/alert-soft-style.html`
-```html
-<div role="alert" class="alert alert-info alert-soft">
-  <span>12 unread messages. Tap to see.</span>
-</div>
-<div role="alert" class="alert alert-success alert-soft">
-  <span>Your purchase has been confirmed!</span>
-</div>
-<div role="alert" class="alert alert-warning alert-soft">
-  <span>Warning: Invalid email address!</span>
-</div>
-<div role="alert" class="alert alert-error alert-soft">
-  <span>Error! Task failed successfully.</span>
-</div>
-```
-### Alert with buttons — responsive
-Source: `playground/components/alert/alert-with-buttons--responsive.html`
-```html
-<div role="alert" class="alert alert-vertical sm:alert-horizontal">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-  </svg>
-  <span>we use cookies for no reason.</span>
-  <div>
-    <button class="btn btn-sm">Deny</button>
-    <button class="btn btn-sm btn-primary">Accept</button>
-  </div>
-</div>
-```
-### Alert with title and description
-Source: `playground/components/alert/alert-with-title-and-description.html`
-```html
-<div role="alert" class="alert alert-vertical sm:alert-horizontal">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-  </svg>
-  <div>
-    <h3 class="font-bold">New message!</h3>
-    <div class="text-xs">You have 1 unread message</div>
-  </div>
-  <button class="btn btn-sm">See</button>
-</div>
-```
-### Error color
-Source: `playground/components/alert/error-color.html`
-```html
-<div role="alert" class="alert alert-error">
-  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>
-  <span>Error! Task failed successfully.</span>
-</div>
-```
-### Info color
-Source: `playground/components/alert/info-color.html`
-```html
-<div role="alert" class="alert alert-info">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-  </svg>
-  <span>New software update available.</span>
-</div>
-```
-### Success color
-Source: `playground/components/alert/success-color.html`
-```html
-<div role="alert" class="alert alert-success">
-  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>
-  <span>Your purchase has been confirmed!</span>
-</div>
-```
-### Warning color
-Source: `playground/components/alert/warning-color.html`
-```html
-<div role="alert" class="alert alert-warning">
-  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-  </svg>
-  <span>Warning: Invalid email address!</span>
-</div>
-```

package/skill/margaui/components/aura.md DELETED Viewed

@@ -1,97 +0,0 @@
-# aura
-_animated glowing border wrapper (rainbow, holo, dual, silver, gold, glow)_
-## What it does
-Wraps any element in an animated conic-gradient border light. Auto-picks corner radius when wrapping a card/alert/button/input/select/checkbox/toggle/badge.
-## When to use
-- Highlighting the single most important button, card, or promo element on a page.
-- Not for general emphasis — use sparingly, it's an eye-catching animated effect.
-## Core classes
-`aura`; style `aura-rainbow|holo|dual|silver|gold|glow`; size `aura-xs|sm|md|lg|xl`.
-## Examples
-### Aura sizes
-Source: `playground/components/aura/aura-sizes.html`
-```html
-<div class="flex flex-wrap gap-6 items-center">
-  <div class="aura aura-xs">
-    <button class="btn btn-primary">xs</button>
-  </div>
-  <div class="aura aura-sm">
-    <button class="btn btn-primary">sm</button>
-  </div>
-  <div class="aura aura-md">
-    <button class="btn btn-primary">md</button>
-  </div>
-  <div class="aura aura-lg">
-    <button class="btn btn-primary">lg</button>
-  </div>
-  <div class="aura aura-xl">
-    <button class="btn btn-primary">xl</button>
-  </div>
-</div>
-```
-### Aura styles
-Source: `playground/components/aura/aura-styles.html`
-```html
-<div class="flex flex-wrap gap-6 items-center">
-  <div class="aura">
-    <button class="btn">default</button>
-  </div>
-  <div class="aura aura-rainbow">
-    <button class="btn">rainbow</button>
-  </div>
-  <div class="aura aura-holo">
-    <button class="btn">holo</button>
-  </div>
-  <div class="aura aura-dual">
-    <button class="btn">dual</button>
-  </div>
-  <div class="aura aura-silver">
-    <button class="btn">silver</button>
-  </div>
-  <div class="aura aura-gold">
-    <button class="btn">gold</button>
-  </div>
-  <div class="aura aura-glow">
-    <button class="btn">glow</button>
-  </div>
-</div>
-```
-### Aura wrapping a button
-Source: `playground/components/aura/aura-wrapping-a-button.html`
-```html
-<div class="aura">
-  <button class="btn btn-primary">Buy now</button>
-</div>
-```
-### Aura wrapping a card
-Source: `playground/components/aura/aura-wrapping-a-card.html`
-```html
-<div class="aura aura-rainbow">
-  <div class="card bg-base-100 w-64 shadow-sm">
-    <div class="card-body">
-      <h2 class="card-title">Featured</h2>
-      <p>This card is wrapped in an aura effect.</p>
-    </div>
-  </div>
-</div>
-```