Tutorial Layer — Usage Guide

New-Functions  tutorial Layer

The Tutorial Layer — Developer & Usage Guide

The Tutorial Layer is an overlay system that automatically detects UI elements and provides contextual explanations when users interact with them. It requires no manual wiring per component.

How users activate it

• Desktop: Right-click any UI element
• iOS / Touch: Two-finger hold on any element

Once activated, the system highlights the element and displays an explanation panel.

How to disable it

• Open any tutorial overlay
• Click ✕ Disable

This permanently stores a disabled flag in localStorage under nanostate.

To reset:

localStorage.removeItem("nanostate");
location.reload();

Developer Integration

The system automatically detects elements using standard selectors:

.fbutton,
button,
input,
textarea,
select,
[contenteditable="true"],
div.words,
div[title],
div[alt],
div[aria-label],
#text

You can make any element compatible simply by using one of these attributes or classes.

Basic Example (Button)

This button will automatically be picked up by the Tutorial Layer:

Save

<button class="fbutton" title="Save your changes">
  Save
</button>

What happens:

• Right-click (or two-finger hold) on the button
• Tutorial Layer opens
• Title is read from title attribute
• Element is highlighted and explained

Example with aria-label + description

Delete

<button class="fbutton"
        aria-label="Delete item permanently"
        data-desc="This removes the item from the system">
  Delete
</button>

How it is interpreted:

• aria-label → primary title
• data-desc → detailed explanation

Example with custom element (div button)

<div class="fbutton"
     title="Open settings panel"
     data-desc="This opens the configuration menu for the application">
  Open Settings
</div>

How the system interprets elements

Priority order for display text:

1. title
2. aria-label
3. innerText (fallback)

Priority order for description:

1. alt
2. data-desc
3. aria-description
4. aria-label
5. title

Key behavior notes

• Only visible elements are included
• Disabled elements are ignored
• Elements marked data-nano-skip are excluded
• DOM changes are tracked automatically (MutationObserver)

Summary

The Tutorial Layer requires no setup beyond using standard HTML attributes. Once active, it turns any UI into a self-explaining system by binding explanations directly to real DOM elements.