tutuca 0.9.39 → 0.9.41

package/skill/immutable-js/references/stack.md

@@ -0,0 +1,210 @@
+`Stack` is an `Collection.Indexed` optimized for LIFO operations at the FRONT (index 0). Unlike `List` and the JavaScript `Array`, `push` and `pop` operate on the head of the collection, not the tail: `push(v)` is an alias for `unshift(v)` and `pop()` is an alias for `shift()`. Both are `O(1)` because Stack is implemented as a singly-linked list. Reach for `Stack` whenever the workload is dominated by head insertion/removal (parser/eval stacks, undo histories, DFS frontiers); reach for `List` when you need fast tail operations or random access. Reverse traversals (`reverse`, `reduceRight`, `lastIndexOf`, etc.) are not efficient on Stack.
+
+## Construction
+
+### Stack
+```ts
+Stack<T>(collection?: Iterable<T> | ArrayLike<T>): Stack<T>
+```
+Factory function (no `new`). Iteration order of the input is preserved; the first item of the input becomes the head (index 0).
+
+### Stack.of
+```ts
+Stack.of<T>(...values: Array<T>): Stack<T>
+```
+Creates a Stack with the given values; the first argument becomes the head.
+
+```ts
+import { Stack } from 'immutable';
+Stack.of(1, 2, 3); // => Stack [ 1, 2, 3 ]  (head is 1)
+```
+
+## Reading
+
+### peek
+```ts
+peek(): T | undefined
+```
+Alias for `first()`; returns the value at the head without removing it.
+
+### first
+```ts
+first(): T | undefined
+```
+Returns the value at index 0 (the head).
+
+### last
+```ts
+last(): T | undefined
+```
+Returns the value at the tail. `O(n)` — Stack is singly-linked.
+
+### get
+```ts
+get(key: number): T | undefined
+get<NSV>(key: number, notSetValue: NSV): T | NSV
+```
+Index-based access; `O(n)` traversal from the head.
+
+### size
+```ts
+readonly size: number
+```
+
+### includes / has / indexOf / lastIndexOf / find / findIndex
+```ts
+includes(value: T): boolean
+has(key: number): boolean
+indexOf(searchValue: T): number
+lastIndexOf(searchValue: T): number
+find(predicate, context?, notSetValue?): T | undefined
+findIndex(predicate, context?): number
+```
+Equality uses `Immutable.is`. `lastIndexOf` and `findLast*` walk the entire stack in reverse and are not efficient. `findEntry`, `findKey`, `keyOf`, `lastKeyOf`, `findLast`, `findLastIndex` are inherited from `Collection.Indexed`.
+
+## Persistent changes (head)
+
+All mutating operations target the FRONT of the Stack. This is the key behavioral difference from `List`/`Array`.
+
+### push / unshift
+```ts
+push(...values: Array<T>): Stack<T>
+unshift(...values: Array<T>): Stack<T>
+```
+Both prepend `values` to the FRONT (`push` is an alias for `unshift`), shifting existing values to higher indices. NOT equivalent to `List#push` / `Array#push`, which append to the tail. `O(1)` per value.
+
+```ts
+Stack.of(1, 2).push(0);     // => Stack [ 0, 1, 2 ]
+Stack.of(1, 2).push(9, 8);  // => Stack [ 9, 8, 1, 2 ]
+```
+
+### pushAll / unshiftAll
+```ts
+pushAll(iter: Iterable<T>): Stack<T>
+unshiftAll(iter: Iterable<T>): Stack<T>
+```
+Iterable-accepting variants; both prepend to the FRONT. `pushAll` is an alias for `unshiftAll`.
+
+### pop / shift
+```ts
+pop(): Stack<T>
+shift(): Stack<T>
+```
+Both remove the value at the FRONT (`pop` is an alias for `shift`). NOT equivalent to `List#pop` / `Array#pop`. Returns the new Stack, NOT the removed value — use `peek()`/`first()` to read the head before popping. Differs from `Array#shift` for the same reason.
+
+```ts
+Stack.of(1, 2, 3).pop(); // => Stack [ 2, 3 ]
+```
+
+### clear
+```ts
+clear(): Stack<T>
+```
+Returns an empty Stack.
+
+All of `push`, `pushAll`, `pop`, `unshift`, `unshiftAll`, `shift`, `clear` are safe inside `withMutations`.
+
+## Sequence algorithms
+
+### map / flatMap / filter / filterNot
+```ts
+map<M>(mapper: (value: T, key: number, iter: this) => M, context?: unknown): Stack<M>
+flatMap<M>(mapper: (value: T, key: number, iter: this) => Iterable<M>, context?: unknown): Stack<M>
+filter<F extends T>(predicate: (value: T, index: number, iter: this) => value is F, context?: unknown): Set<F>
+filter(predicate: (value: T, index: number, iter: this) => unknown, context?: unknown): this
+filterNot(predicate: (value: T, index: number, iter: this) => boolean, context?: unknown): this
+```
+Each returns a new Stack instance (or refined `Set` for the type-guard `filter` overload).
+
+### concat
+```ts
+concat<C>(...valuesOrCollections: Array<Iterable<C> | C>): Stack<T | C>
+```
+Concatenates onto the END of this Stack (after the existing tail).
+
+### reverse
+```ts
+reverse(): this
+```
+Eager and `O(n)` — Stack is singly-linked, so reverse traversal is not efficient.
+
+### slice
+```ts
+slice(begin?: number, end?: number): this
+```
+
+### sort / sortBy
+```ts
+sort(comparator?: Comparator<T>): this
+sortBy<C>(comparatorValueMapper: (value: T, key: number, iter: this) => C, comparator?: Comparator<C>): this
+```
+Stable, eager. Default comparator uses `<`/`>`; comparator may also return a `PairSorting` enum value.
+
+### groupBy
+```ts
+groupBy<G>(grouper: (value: T, key: number, iter: this) => G, context?: unknown): Map<G, Stack<T>>
+```
+Eager; returns a `Map<G, Stack<T>>`.
+
+### partition
+```ts
+partition<F extends T, C>(predicate: (this: C, value: T, index: number, iter: this) => value is F, context?: C): [Stack<T>, Stack<F>]
+partition<C>(predicate: (this: C, value: T, index: number, iter: this) => unknown, context?: C): [this, this]
+```
+Returns `[falseMatches, trueMatches]`.
+
+### zip / zipAll / zipWith
+```ts
+zip<U>(other: Collection<unknown, U>): Stack<[T, U]>
+zipAll<U>(other: Collection<unknown, U>): Stack<[T, U]>
+zipWith<U, Z>(zipper: (value: T, otherValue: U) => Z, other: Collection<unknown, U>): Stack<Z>
+```
+`zip` stops at the shortest input; `zipAll` continues to the longest, padding with `undefined`.
+
+## Conversion
+
+### toArray / toJS / toJSON
+```ts
+toArray(): Array<T>            // shallow; head becomes index 0
+toJS(): Array<DeepCopy<T>>     // deep
+toJSON(): Array<T>             // shallow (used by JSON.stringify)
+```
+
+### toSeq
+```ts
+toSeq(): Seq.Indexed<T>
+```
+Lazy `Seq.Indexed` view; also `toIndexedSeq()`, `toKeyedSeq()`, `toSetSeq()`.
+
+### asMutable / asImmutable
+```ts
+asMutable(): this
+asImmutable(): this
+```
+Manual transient pair; prefer `withMutations` for scoped batches.
+
+## Mutation batching
+
+### withMutations
+```ts
+withMutations(mutator: (mutable: this) => unknown): this
+```
+Apply a batch of head-mutations efficiently. Only methods documented as safe in `withMutations` may be used inside (`push`, `pushAll`, `pop`, `unshift`, `unshiftAll`, `shift`, `clear`).
+
+```ts
+Stack.of(1, 2).withMutations(s => {
+  s.push(0).push(-1).pop();
+}); // => Stack [ 0, 1, 2 ]
+```
+
+### wasAltered
+```ts
+wasAltered(): boolean
+```
+True if the most recent operation produced a structurally different Stack.
+
+## See also
+
+- `collection.md` — `Collection.Indexed` superclass methods Stack inherits.
+- `list.md` — when you need fast TAIL operations, random access, or `Array`-like `push`/`pop` semantics.
+- `predicates.md` — `Stack.isStack(value)`.

package/skill/margaui/SKILL.md

@@ -0,0 +1,101 @@
+---
+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: 65 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/)**. 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.
+
+## 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)
+- [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, …)
+- [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
+- [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

@@ -0,0 +1,127 @@
+# 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

@@ -0,0 +1,174 @@
+# 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>
+```