tutuca 0.11.2 → 0.12.0

package/skill/margaui/components/toast.md

@@ -0,0 +1,165 @@
+# toast
+
+_fixed-position notification stack (corner overlays)_
+
+## What it does
+
+Fixed-position container for transient notifications. Position via `toast-start|center|end` × `toast-top|middle|bottom`.
+
+## When to use
+
+- Transient feedback ("saved", "copied", "error sending").
+- For inline persistent feedback, use **alert**.
+
+## Core classes
+
+`toast`; horizontal `toast-start|center|end`; vertical `toast-top|middle|bottom`. Typically wraps **alert** children.
+
+## Examples
+
+### Toast center toast bottom default
+
+Source: `playground/components/toast/toast-center-toast-bottom-default.html`
+
+```html
+<div class="toast toast-center">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast center toast middle
+
+Source: `playground/components/toast/toast-center-toast-middle.html`
+
+```html
+<div class="toast toast-center toast-middle">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast end default toast bottom default
+
+Source: `playground/components/toast/toast-end-default-toast-bottom-default.html`
+
+```html
+<div class="toast toast-end">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast end toast middle
+
+Source: `playground/components/toast/toast-end-toast-middle.html`
+
+```html
+<div class="toast toast-end toast-middle">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast start toast bottom default
+
+Source: `playground/components/toast/toast-start-toast-bottom-default.html`
+
+```html
+<div class="toast toast-start">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast start toast middle
+
+Source: `playground/components/toast/toast-start-toast-middle.html`
+
+```html
+<div class="toast toast-start toast-middle">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast top toast center
+
+Source: `playground/components/toast/toast-top-toast-center.html`
+
+```html
+<div class="toast toast-top toast-center">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast top toast end
+
+Source: `playground/components/toast/toast-top-toast-end.html`
+
+```html
+<div class="toast toast-top toast-end">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast top toast start
+
+Source: `playground/components/toast/toast-top-toast-start.html`
+
+```html
+<div class="toast toast-top toast-start">
+  <div class="alert alert-info">
+    <span>New mail arrived.</span>
+  </div>
+  <div class="alert alert-success">
+    <span>Message sent successfully.</span>
+  </div>
+</div>
+```
+
+### Toast with alert inside
+
+Source: `playground/components/toast/toast-with-alert-inside.html`
+
+```html
+<div class="toast">
+  <div class="alert alert-info">
+    <span>New message arrived.</span>
+  </div>
+</div>
+```

package/skill/margaui/components/toggle.md

@@ -0,0 +1,135 @@
+# toggle
+
+_on/off switch (styled checkbox)_
+
+## What it does
+
+Sliding on/off switch — a styled `<input type="checkbox">`.
+
+## When to use
+
+- Boolean settings where switch metaphor fits.
+- For multi-select lists, use **checkbox**.
+
+## Core classes
+
+`toggle`; color `toggle-primary|secondary|accent|info|success|warning|error|neutral`; size `toggle-xs|sm|md|lg|xl`.
+
+## Examples
+
+### Colors
+
+Source: `playground/components/toggle/colors.html`
+
+```html
+<input type="checkbox" checked="checked" class="toggle toggle-primary" />
+<input type="checkbox" checked="checked" class="toggle toggle-secondary" />
+<input type="checkbox" checked="checked" class="toggle toggle-accent" />
+<input type="checkbox" checked="checked" class="toggle toggle-neutral" />
+
+<input type="checkbox" checked="checked" class="toggle toggle-info" />
+<input type="checkbox" checked="checked" class="toggle toggle-success" />
+<input type="checkbox" checked="checked" class="toggle toggle-warning" />
+<input type="checkbox" checked="checked" class="toggle toggle-error" />
+```
+
+### Disabled
+
+Source: `playground/components/toggle/disabled.html`
+
+```html
+<input type="checkbox" class="toggle" disabled />
+<input type="checkbox" class="toggle" disabled checked="checked" />
+```
+
+### Indeterminate
+
+Source: `playground/components/toggle/indeterminate.html`
+
+```html
+<!-- You can make a checkbox indeterminate using JS -->
+<script>
+  document.getElementById("my-toggle").indeterminate = true
+</script>
+<input type="checkbox" class="toggle" id="my-toggle" />
+```
+
+### Sizes
+
+Source: `playground/components/toggle/sizes.html`
+
+```html
+<input type="checkbox" checked="checked" class="toggle toggle-xs" />
+<input type="checkbox" checked="checked" class="toggle toggle-sm" />
+<input type="checkbox" checked="checked" class="toggle toggle-md" />
+<input type="checkbox" checked="checked" class="toggle toggle-lg" />
+<input type="checkbox" checked="checked" class="toggle toggle-xl" />
+```
+
+### Toggle switch
+
+Source: `playground/components/toggle/toggle-switch.html`
+
+```html
+<input type="checkbox" checked="checked" class="toggle" />
+```
+
+### Toggle with custom colors
+
+Source: `playground/components/toggle/toggle-with-custom-colors.html`
+
+```html
+<input
+  type="checkbox"
+  checked="checked"
+  class="toggle border-indigo-600 bg-indigo-500 checked:border-orange-500 checked:bg-orange-400 checked:text-orange-800"
+/>
+```
+
+### Toggle with icons inside
+
+Source: `playground/components/toggle/toggle-with-icons-inside.html`
+
+```html
+<label class="toggle text-base-content">
+  <input type="checkbox" />
+  <svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g
+      stroke-linejoin="round"
+      stroke-linecap="round"
+      stroke-width="4"
+      fill="none"
+      stroke="currentColor"
+    >
+      <path d="M20 6 9 17l-5-5"></path>
+    </g>
+  </svg>
+  <svg
+    aria-label="disabled"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="4"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+</label>
+```
+
+### With fieldset and label
+
+Source: `playground/components/toggle/with-fieldset-and-label.html`
+
+```html
+<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
+  <legend class="fieldset-legend">Login options</legend>
+  <label class="label">
+    <input type="checkbox" checked="checked" class="toggle" />
+    Remember me
+  </label>
+</fieldset>
+```

package/skill/margaui/components/tooltip.md

@@ -0,0 +1,181 @@
+# tooltip
+
+_hover/focus tooltip on any element_
+
+## What it does
+
+Hover/focus tooltip; content from `data-tip` or a child `tooltip-content` element.
+
+## When to use
+
+- Short hints on icon-only buttons or controls.
+- For longer content panels, use **dropdown**.
+
+## Core classes
+
+`tooltip`; position `tooltip-top|bottom|left|right`; align `tooltip-start|center|end`; color `tooltip-primary|…`; modifier `tooltip-open` to force-show; `data-tip="…"` for text content.
+
+## Examples
+
+### Tooltip
+
+Source: `playground/components/tooltip/tooltip.html`
+
+```html
+<div class="tooltip" data-tip="hello">
+  <button class="btn">Hover me</button>
+</div>
+```
+
+### Accent color
+
+Source: `playground/components/tooltip/accent-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-accent" data-tip="accent">
+  <button class="btn btn-accent">accent</button>
+</div>
+```
+
+### Bottom
+
+Source: `playground/components/tooltip/bottom.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-bottom" data-tip="hello">
+  <button class="btn">Bottom</button>
+</div>
+```
+
+### Error color
+
+Source: `playground/components/tooltip/error-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-error" data-tip="error">
+  <button class="btn btn-error">error</button>
+</div>
+```
+
+### Force open
+
+Source: `playground/components/tooltip/force-open.html`
+
+```html
+<div class="tooltip tooltip-open" data-tip="hello">
+  <button class="btn">Force open</button>
+</div>
+```
+
+### Info color
+
+Source: `playground/components/tooltip/info-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-info" data-tip="info">
+  <button class="btn btn-info">info</button>
+</div>
+```
+
+### Left
+
+Source: `playground/components/tooltip/left.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-left" data-tip="hello">
+  <button class="btn">Left</button>
+</div>
+```
+
+### Neutral color
+
+Source: `playground/components/tooltip/neutral-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-neutral" data-tip="neutral">
+  <button class="btn btn-neutral">neutral</button>
+</div>
+```
+
+### Primary color
+
+Source: `playground/components/tooltip/primary-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-primary" data-tip="primary">
+  <button class="btn btn-primary">primary</button>
+</div>
+```
+
+### Responsive tooltip only show for large screen
+
+Source: `playground/components/tooltip/responsive-tooltip-only-show-for-large-screen.html`
+
+```html
+<div class="lg:tooltip" data-tip="hello">
+  <button class="btn">Hover me</button>
+</div>
+```
+
+### Right
+
+Source: `playground/components/tooltip/right.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-right" data-tip="hello">
+  <button class="btn">Right</button>
+</div>
+```
+
+### Secondary color
+
+Source: `playground/components/tooltip/secondary-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-secondary" data-tip="secondary">
+  <button class="btn btn-secondary">secondary</button>
+</div>
+```
+
+### Success color
+
+Source: `playground/components/tooltip/success-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-success" data-tip="success">
+  <button class="btn btn-success">success</button>
+</div>
+```
+
+### Tooltip with tooltip content
+
+Source: `playground/components/tooltip/tooltip-with-tooltip-content.html`
+
+```html
+<div class="tooltip">
+  <div class="tooltip-content">
+    <div class="animate-bounce text-orange-400 -rotate-10 text-2xl font-black">Wow!</div>
+  </div>
+  <button class="btn">Hover me</button>
+</div>
+```
+
+### Top
+
+Source: `playground/components/tooltip/top.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-top" data-tip="hello">
+  <button class="btn">Top</button>
+</div>
+```
+
+### Warning color
+
+Source: `playground/components/tooltip/warning-color.html`
+
+```html
+<div class="tooltip tooltip-open tooltip-warning" data-tip="warning">
+  <button class="btn btn-warning">warning</button>
+</div>
+```

package/skill/margaui/components/validator.md

@@ -0,0 +1,163 @@
+# validator
+
+_show validation message tied to a form input_
+
+## What it does
+
+Companion to **input** / **select** / **textarea** that styles the input based on `:invalid` and shows a `validator-hint` message.
+
+## When to use
+
+- Inline form-field validation feedback driven by native HTML constraints.
+
+## Core classes
+
+`validator` on the input; `validator-hint` on the message element.
+
+## Examples
+
+### Validator
+
+Source: `playground/components/validator/validator.html`
+
+```html
+<input class="input validator" type="email" required placeholder="mail@site.com" />
+```
+
+### Checkbox requirement validator
+
+Source: `playground/components/validator/checkbox-requirement-validator.html`
+
+```html
+<input type="checkbox" class="checkbox validator" required title="Required" />
+<p class="validator-hint">Required</p>
+```
+
+### Date input requirement validator
+
+Source: `playground/components/validator/date-input-requirement-validator.html`
+
+```html
+<input type="date" class="input validator" required placeholder="Pick a date in 2025" 
+min="2025-01-01" max="2025-12-31"
+  title="Must be valid URL" />
+<p class="validator-hint">Must be 2025</p>
+```
+
+### Form requirement validator
+
+Source: `playground/components/validator/form-requirement-validator.html`
+
+```html
+<form class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
+  <fieldset class="fieldset">
+    <label class="label">Email</label>
+    <input type="email" class="input validator" placeholder="Email" required />
+    <p class="validator-hint hidden">Required</p>
+  </fieldset>
+
+  <label class="fieldset">
+    <span class="label">Password</span>
+    <input type="password" class="input validator" placeholder="Password" required />
+    <span class="validator-hint hidden">Required</span>
+  </label>
+
+  <button class="btn btn-neutral mt-4" type="submit">Login</button>
+  <button class="btn btn-ghost mt-1" type="reset">Reset</button>
+</form>
+```
+
+### Number input requirement validator
+
+Source: `playground/components/validator/number-input-requirement-validator.html`
+
+```html
+<input type="number" class="input validator" required placeholder="Type a number between 1 to 10" 
+min="1" max="10"
+  title="Must be between be 1 to 10" />
+<p class="validator-hint">Must be between be 1 to 10</p>
+```
+
+### Password requirement validator
+
+Source: `playground/components/validator/password-requirement-validator.html`
+
+```html
+<input type="password" class="input validator" required placeholder="Password" minlength="8" 
+  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
+  title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
+<p class="validator-hint">
+  Must be more than 8 characters, including
+  <br/>At least one number
+  <br/>At least one lowercase letter
+  <br/>At least one uppercase letter
+</p>
+```
+
+### Phone number requirement validator
+
+Source: `playground/components/validator/phone-number-requirement-validator.html`
+
+```html
+<input type="tel" class="input validator tabular-nums" required placeholder="Phone" 
+  pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
+<p class="validator-hint">Must be 10 digits</p>
+```
+
+### Select requirement validator
+
+Source: `playground/components/validator/select-requirement-validator.html`
+
+```html
+<form>
+  <select class="select validator" required>
+    <option disabled selected value="">Choose:</option>
+    <option>Tabs</option>
+    <option>Spaces</option>
+  </select>
+  <p class="validator-hint">Required</p>
+  <button class="btn" type="submit">Submit form</button>
+</form>
+```
+
+### Toggle requirement validator
+
+Source: `playground/components/validator/toggle-requirement-validator.html`
+
+```html
+<input type="checkbox" class="toggle validator" required title="Required" />
+<p class="validator-hint">Required</p>
+```
+
+### Url input requirement validator
+
+Source: `playground/components/validator/url-input-requirement-validator.html`
+
+```html
+<input type="url" class="input validator" required placeholder="https://" value="https://"
+  pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9-].*[a-zA-Z0-9])?.)+[a-zA-Z].*$" 
+  title="Must be valid URL" />
+<p class="validator-hint">Must be valid URL</p>
+```
+
+### Username requirement validator
+
+Source: `playground/components/validator/username-requirement-validator.html`
+
+```html
+<input type="text" class="input validator" required placeholder="Username" 
+  pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
+<p class="validator-hint">
+  Must be 3 to 30 characters
+  <br/>containing only letters, numbers or dash
+</p>
+```
+
+### Validator and validator hint
+
+Source: `playground/components/validator/validator-and-validator-hint.html`
+
+```html
+<input class="input validator" type="email" required placeholder="mail@site.com" />
+<div class="validator-hint">Enter valid email address</div>
+```

package/skill/tutuca/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: tutuca
+description: Use when authoring or reviewing tutuca modules — `component({...})` definitions, `html`...`` views, `@`-directives, `receive` / `intent` / `alter` handlers, macros, or `getTests` exports — or when running the `tutuca` CLI (`lint` / `test` / `render` / `show`). Covers the post-edit `tutuca lint <module>` → `test` → `render --title "<example>"` verification recipe.
+---
+
+<!-- Source of truth: docs/skill/. The skill/tutuca/ copy is generated by scripts/build-skill.js — edit docs/skill/, not skill/. -->
+
+# Tutuca
+
+Tutuca is an immutable-state SPA framework. Read [core.md](./core.md)
+first for the framework primer.
+
+## Verifying changes
+
+After editing a tutuca module, run these before declaring the edit done:
+
+```sh
+tutuca lint <module>                       # undefined fields/handlers/macros (exit 2 on errors)
+tutuca test <module>                       # getTests() behavior checks (exit 4 on failures)
+tutuca render <module> --title "<example>" # mount the example covering the change (exit 3 on crash)
+```
+
+Full recipe — when to skip `test`, adding a covering example, the
+project-wide `storybook --dry-run` smoke test — in
+[core.md](./core.md#verifying-changes).
+
+## Companion skills
+
+When authoring tutuca code, also load these if available:
+
+- **margaui** — the Tailwind v4 / daisyUI-compatible class library.
+  Reach for it when the project uses MargaUI / Tailwind class lists in
+  `class=` / `:class=`. See [margaui.md](./margaui.md) to set it up in a
+  project and wire it into tutuca.
+
+## Routing
+
+| Task                                                                                           | File                            |
+| ---------------------------------------------------------------------------------------------- | ------------------------------- |
+| Authoring `component({...})`, `html`...`` views, fields, events, conditional display | [core.md](./core.md)           |
+| Iterating lists — `@each` / `render-each`, `@when` filtering, `@enrich-with`, `@loop-with` pagination | [iteration.md](./iteration.md) |
+| Macros — `macro({...}, html)` definitions, `<x:name>` calls, slots, registration | [macros.md](./macros.md) |
+| Component CSS — `style` / `commonStyle` / `globalStyle` scoping and pitfalls | [styles.md](./styles.md) |
+| Designing components — responsibilities, state ownership, channel choice, do's & don'ts | [component-design.md](./component-design.md) |
+| CLI commands, flags, exit codes, full linter rule list                                         | [cli.md](./cli.md)             |
+| Authoring `*.dev.js` story modules, `getExamples()` sections, per-example intent-handler mocking, running `tutuca storybook` | [storybook.md](./storybook.md) |
+| Addressed `send`/`receive` vs routed `intent` (routes, `reply`/`fail`/`forward`/`stop`, the three outcomes), `$unknown`, intent-handler registration | [messages-and-intents.md](./messages-and-intents.md) |
+| Drag & drop, dynamic bindings (`*x`), pseudo-`x`, custom seq types | [advanced.md](./advanced.md)   |
+| Setting up MargaUI styling — install (CDN / npm / vendoring), theme CSS, and the `compileClassesToStyleText` wiring | [margaui.md](./margaui.md)     |
+| Runtime semantics — path steps, transaction lifecycle, dyn-var teleporting, async key pinning (`livePath`) | [semantics.md](./semantics.md) |
+| Authoring tests — `getTests` shape, calling methods / receive / intent / alter handlers, designing handlers for testability | [testing.md](./testing.md) |
+| Task-oriented recipes — iteration, filtering, conditional content, conditional attributes, dynamic vars, composition, events | [patterns/README.md](./patterns/README.md) |
+
+Read `core.md` first. Reach for the others only when the task touches
+them — each is referenced inline from `core.md` so you'll be pointed
+there when relevant.