tutuca 0.9.39 → 0.9.41

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`; 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/{advanced.md → tutuca/advanced.md}

@@ -144,3 +144,8 @@ app.start();
 collects the `class=` and `:class=` literals, hands them to a `compile`
 function (any margaui-compatible signature), and returns CSS text. Pair
 with `injectCss(scopeName, css)` to install the result before `start()`.
+
+If a margaui skill is installed in this project (e.g.
+`.claude/skills/margaui/`) load it alongside this one when authoring
+class lists — it lists the available components and their canonical
+class strings, which is what the `compile` step expects.

package/skill/{cli.md → tutuca/cli.md}

@@ -79,6 +79,23 @@ tutuca ./src/components.js render --title "Disabled state"
 tutuca ./src/components.js render --title "Disabled state" --pretty
 ```
 
+## Install skill assets
+
+`tutuca install-skill` copies bundled Claude Code skill files into
+`.claude/skills/<name>/` so a session in this directory picks them up.
+
+```sh
+tutuca install-skill                   # tutuca skill (default), into ./.claude/skills/tutuca/
+tutuca install-skill --user            # ~/.claude/skills/tutuca/
+tutuca install-skill --margaui-skill   # margaui skill instead of tutuca
+tutuca install-skill --immutable-skill # immutable-js skill instead of tutuca
+tutuca install-skill --all             # all bundled skills (tutuca + margaui + immutable-js)
+tutuca install-skill --all --force     # overwrite existing files
+```
+
+`--user`/`--project` choose scope (default `--project`).
+`--margaui-skill`, `--immutable-skill`, and `--all` are mutually exclusive.
+
 ## Linter Rules
 
 Codes emitted by `lint`. Source: `tools/core/lint-check.js`.

package/skill/{core.md → tutuca/core.md}

@@ -721,6 +721,11 @@ import {
 } from "tutuca";
 ```
 
+Because every `immutable` export is reachable through `tutuca`, if an
+`immutable-js` skill is installed in this project (e.g.
+`.claude/skills/immutable-js/`) load it alongside this one — its guidance
+applies directly to the values you'll be reading and writing.
+
 ## Conventional Module Exports
 
 Examples and the storybook glue follow this shape so files compose freely