morethanui 1.0.0

package/js/x-toast.js

@@ -0,0 +1,119 @@
+/* MTUI <x-toast> — tier: JS-only.
+   Toast stack: inverse pills dropping from top center, max 3, slide-up
+   exit, pause on hover/focus. Toasts never carry the only copy of
+   critical information (there is no no-JS fallback).
+   API:  mtui.toast('Changes saved')
+         mtui.toast('Message deleted', {
+           action: { label: 'Undo', onClick: fn },
+           duration: 4000,        // ms visible; default 4000
+           kind: 'success',       // opt-in feedback cue: tick|success|error (js/feedback.js)
+         }) → dismiss()
+   The <x-toast> mount is created on first use (or place one in the page). */
+(function () {
+  'use strict';
+  if (customElements.get('x-toast')) return;
+
+  function cssVar(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  }
+
+  /* Removing a toast from the flex stack instantly snaps whatever was
+     below it up into the gap — CSS has no built-in transition for a
+     sibling's layout position changing. FLIP it: record where every
+     remaining toast sits before removal, let the browser reflow, then
+     play each one in from its old position to its new one. Skipped
+     entirely under reduced motion (--t-knob collapses to 0ms). */
+  function removeAndSettle(root, toast) {
+    const duration = parseFloat(cssVar('--t-knob')) || 0;
+    const siblings = [...root.querySelectorAll('.toast')].filter((t) => t !== toast);
+    const before = siblings.map((el) => el.getBoundingClientRect().top);
+
+    toast.remove();
+    if (duration === 0) return;
+
+    const easing = cssVar('--spring') || 'ease';
+    siblings.forEach((el, i) => {
+      const dy = before[i] - el.getBoundingClientRect().top;
+      if (!dy) return;
+      el.style.transition = 'none';
+      el.style.transform = `translateY(${dy}px)`;
+      el.getBoundingClientRect(); // force the browser to commit the jump before transitioning
+      requestAnimationFrame(() => {
+        el.style.transition = `transform ${duration}ms ${easing}`;
+        el.style.transform = '';
+      });
+      el.addEventListener('transitionend', function onEnd(e) {
+        if (e.propertyName !== 'transform') return;
+        el.style.transition = '';
+        el.removeEventListener('transitionend', onEnd);
+      });
+    });
+  }
+
+  class XToast extends HTMLElement {
+    connectedCallback() {
+      this.setAttribute('role', 'status');
+      this.setAttribute('aria-live', 'polite');
+    }
+
+    show(message, opts = {}) {
+      const toast = document.createElement('div');
+      toast.className = 'toast';
+      if (opts.kind) toast.dataset.kind = opts.kind;
+      const text = document.createElement('span');
+      text.textContent = message;
+      toast.append(text);
+
+      const dismiss = () => {
+        if ('leaving' in toast.dataset) return;
+        toast.dataset.leaving = '';
+        clearTimeout(timer);
+        toast.addEventListener('animationend', () => removeAndSettle(this, toast), { once: true });
+      };
+
+      if (opts.action) {
+        const btn = document.createElement('button');
+        btn.className = 'toast-action';
+        btn.textContent = opts.action.label;
+        btn.addEventListener('click', () => {
+          if (typeof opts.action.onClick === 'function') opts.action.onClick();
+          dismiss();
+        });
+        toast.append(btn);
+      }
+
+      this.append(toast);
+
+      const alive = [...this.querySelectorAll('.toast')]
+        .filter((t) => !('leaving' in t.dataset));
+      if (alive.length > 3) {
+        const oldest = alive[0];
+        oldest.dataset.leaving = '';
+        oldest.addEventListener('animationend', () => removeAndSettle(this, oldest), { once: true });
+      }
+
+      let timer = setTimeout(dismiss, opts.duration || 4000);
+      toast.addEventListener('mouseenter', () => clearTimeout(timer));
+      toast.addEventListener('focusin', () => clearTimeout(timer));
+      toast.addEventListener('mouseleave', () => {
+        clearTimeout(timer);
+        timer = setTimeout(dismiss, 1500);
+      });
+
+      return dismiss;
+    }
+  }
+
+  customElements.define('x-toast', XToast);
+
+  window.mtui = Object.assign(window.mtui || {}, {
+    toast(message, opts) {
+      let mount = document.querySelector('x-toast');
+      if (!mount) {
+        mount = document.createElement('x-toast');
+        document.body.append(mount);
+      }
+      return mount.show(message, opts);
+    },
+  });
+})();

package/llms.txt

@@ -0,0 +1,409 @@
+# MTUI — usage guide for AI models and humans
+
+MTUI (MoreThanUI) is a dependency-free UI library: plain HTML + CSS classes +
+a few custom elements. No Tailwind, no framework, no build step, no packages.
+MTUI is unrelated to Material UI — never import anything.
+
+## Setup — one HTML page, four stylesheets, no build. Full skeleton:
+<!doctype html>
+<html lang="en" data-theme="light" data-accent="clay" data-radius="round" data-density="comfortable">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <link rel="stylesheet" href="css/tokens.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/layout.css">
+  <link rel="stylesheet" href="css/components.css">
+</head>
+<body class="shell"><!-- app frame + one screen preset (see Layout) --></body>
+</html>
+The data-* on <html> are the knobs; the values above ARE the defaults (so
+data-theme default = light, data-accent = clay, etc.). Enhanced-component
+scripts (x-select, x-toast, …) each load once with defer before </body>.
+
+## Theming — data attributes on <html> ONLY. These are the only valid values.
+data-theme:   light | dark
+data-accent:  clay | cobalt | fern | plum | custom (custom needs a generated
+              block — see "Custom accent" below; the 4 presets need nothing)
+data-radius:  round | soft | sharp
+data-density: comfortable | compact
+data-tint:    accent | warm  (default accent: the neutral surfaces + text take
+              the accent hue — blue accent → blue-grey UI, like Telegram/
+              Material; only the hue moves, contrast is unchanged. "warm" keeps
+              the fixed warm neutral. Needs oklch relative-color support; older
+              webviews fall back to warm automatically.)
+
+Rules:
+1. Never set these attributes on any element other than <html>.
+2. Never invent colors, radii, spacing, or durations — if custom CSS is
+   unavoidable, use tokens (var(--surface-2), var(--sp-16), var(--r-card)).
+3. Never draw borders or drop shadows. Separation is tonal.
+4. Compose screens from MTUI layout presets, never hand-written layout CSS.
+
+Setting a knob: <x-theme> (js/x-theme.js) is the full appearance panel. For a
+single control (the common "Dark mode" settings switch), flip the root knob:
+<label class="row" data-align="between"><span class="t-row">Dark mode</span>
+  <input type="checkbox" class="switch"
+    onchange="document.documentElement.dataset.theme = this.checked ? 'dark' : 'light'"></label>
+
+## Layout — every screen starts from a preset. Never write layout CSS,
+## media queries, absolute positioning, or arbitrary gaps in app code.
+
+Typography classes: t-page t-section t-card t-row t-body t-secondary t-label
+t-code (+ t-ltr to keep numbers/emails LTR inside RTL text).
+
+shell — the app frame, one per app. Tab bar <768px, side rail >=768px,
+sticky header, only .shell-content scrolls. Nav items are <a>/<button> = an
+icon (the .icon set works here) + <span> label; mark the current one
+aria-current="page" (it lights up in the accent). shell-header can hold
+trailing actions after the title:
+<body class="shell">
+  <header class="shell-header"><span class="t-card">Title</span>
+    <button class="btn" data-size="icon" aria-label="New"><span class="icon" data-icon="plus"></span></button></header>
+  <nav class="shell-nav">
+    <a href="/" aria-current="page"><span class="icon" data-icon="home"></span><span>Home</span></a>
+    <a href="/inbox"><span class="icon" data-icon="mail"></span><span>Inbox</span></a>
+  </nav>
+  <main class="shell-content"><!-- one screen preset goes here --></main>
+</body>
+
+Screen presets (one per screen, inside .shell-content). The ONLY elements that
+may wrap a preset are the enhancer custom elements — <x-pull-refresh> and/or
+<x-contextmenu> (they may nest around it); everything else goes inside:
+screen-stack   settings/forms/articles — column, centered 40rem >=768px
+screen-list    feeds/chats — full-bleed rows + sticky <header> slot
+screen-split   list+detail — two panes >=900px; below, set data-show="detail"
+               on it to show the detail pane instead of the list pane
+screen-center  auth/empty/error — centered block, max 24rem
+
+<main class="shell-content">
+  <div class="screen-stack">
+    <h1 class="t-page">Settings</h1>
+    <!-- components -->
+  </div>
+</main>
+
+Primitives (inside a preset, for custom regions — enum values ONLY):
+stack  data-gap="4|8|12|16|20|24|32|40|48" (default --gap)  data-align="start|center|stretch" (default stretch — bare children fill width)
+row    data-gap same enum                    data-align="start|center|end|between"  data-wrap="on"
+       (for a "content left, action right" row use data-align="between")
+grid   fixed columns 4 (<768) / 8 (768-1199) / 12 (>=1200), 12px gutter;
+       children: data-span / data-span-md / data-span-lg = integer 1-12
+       (spans clamp to the column count; a span >= the count = full row)
+
+<div class="grid">
+  <div data-span="4" data-span-md="4" data-span-lg="6">half at desktop</div>
+  <div data-span="4" data-span-md="4" data-span-lg="6">other half</div>
+</div>
+
+Debug: add data-outline to any preset/primitive to see dashed layout boxes.
+Remove before shipping.
+
+## Components
+All Basic tier (CSS-only, no JS needed). One canonical markup each — never
+invent alternatives. UI copy: sentence case, plain verbs ("Save changes").
+
+Icons: use the shipped set — <span class="icon" data-icon="home"></span>
+(monochrome currentColor, scales with font-size, no SVG authoring). Names:
+home search settings user bell mail calendar plus x check chevron-up
+chevron-down chevron-left chevron-right more-vertical trash heart star share
+pencil info alert-triangle circle-check circle-x (last four suit alerts/empty
+states). Standalone/meaningful: add role="img" aria-label; inside a labelled
+button it's decorative. For an icon NOT in the set, inline a Lucide SVG
+(viewBox 0 0 24 24, fill none, stroke currentColor, stroke-width 2, ~20px).
+<button class="btn" data-variant="primary"><span class="icon" data-icon="plus"></span> New</button>
+
+button — data-variant="primary|accent|secondary|ghost|danger" (default
+secondary; accent uses the 2nd brand color --accent-2), data-size="icon"
+(square; add aria-label), data-loading (in-place spinner), disabled:
+<button class="btn" data-variant="primary">Save changes</button>
+
+card — surface container (padding only; wrap multiple children in a stack for
+rhythm). screen-stack and stack space their OWN children by --gap, so don't
+double-wrap. Interactive when it's an <a> or <button>:
+<div class="card"><span class="t-card">Title</span><p class="t-body">Body.</p></div>
+
+field — label + control + hint; error via data-invalid on .field; selects
+get a .select wrapper (chevron):
+<label class="field">
+  <span class="t-label">Email</span>
+  <input type="email" placeholder="you@example.com">
+  <span class="field-hint">We never share it.</span>
+  <span class="field-error">Enter a valid email.</span>
+</label>
+<label class="field"><span class="t-label">Role</span>
+  <span class="select"><select><option>Designer</option></select></span></label>
+
+switch / checkbox / radio — native inputs; the wrapping row label is the
+44px tap target:
+<label class="row" data-align="between"><span class="t-row">Dark mode</span>
+  <input type="checkbox" class="switch" checked></label>
+<label class="row" data-gap="12"><input type="checkbox" class="checkbox">
+  <span class="t-row">Send me the newsletter</span></label>
+<label class="row" data-gap="12"><input type="radio" class="radio" name="plan">
+  <span class="t-row">Monthly</span></label>
+
+badge — plain = neutral pill (counts, labels); data-tint="rose|sky|mint|
+butter|lavender" (decorative) or data-status="success|warning|danger":
+<span class="badge">3</span>
+<span class="badge" data-status="success">Paid</span>
+
+chip — filter chips are <button>, selected via aria-pressed="true" (unselected:
+omit it or aria-pressed="false"); removable chips are <span> with a .chip-x
+button holding the x icon (never a ✕ glyph). Filtering is app logic — no MTUI
+helper; toggle aria-pressed and filter your data on click:
+<button class="chip" aria-pressed="true">Unread</button>
+<span class="chip">design <button class="chip-x" aria-label="Remove"><span class="icon" data-icon="x"></span></button></span>
+
+avatar — initials or <img>; data-tint="rose|sky|mint|butter|lavender" (these
+five only — NOT accent names); data-size="sm|lg" (default md); stack for overlap:
+<span class="avatar" data-tint="sky">MC</span>
+<span class="avatar-stack"><span class="avatar" data-tint="sky">MC</span>
+  <span class="avatar" data-tint="mint">RB</span><span class="avatar">+3</span></span>
+
+item — list row (feeds, chats, lists). Lives in screen-list, or in any
+stack/card for a short list. <a>/<button> when interactive. .item-text is
+flex, so ANYTHING after it sits at the trailing edge: a .chevron (inline svg;
+flips in RTL), a badge, or an .item-meta column (stacked time + count):
+<a class="item" href="/chat/1">
+  <span class="avatar" data-tint="mint">MC</span>
+  <span class="item-text"><span class="item-title">Maya Chen</span>
+    <span class="item-sub">Sounds good — tomorrow works.</span></span>
+  <span class="item-meta"><span class="t-label">9:41</span><span class="badge">2</span></span>
+</a>
+<!-- trailing chevron instead of meta: -->
+<a class="item" href="/s">
+  <span class="item-text"><span class="item-title">Privacy</span></span>
+  <svg class="chevron" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
+</a>
+
+segmented — radio group in a well:
+<fieldset class="segmented">
+  <label><input type="radio" name="view" checked><span>Day</span></label>
+  <label><input type="radio" name="view"><span>Week</span></label>
+</fieldset>
+
+accordion — native details/summary; add js/accordion.js for smooth height +
+chevron animation both ways (optional — instant snap without it):
+<details class="accordion"><summary>Shipping details</summary>
+  <div class="accordion-body">Orders ship within two business days.</div></details>
+
+code — block <pre class="code"> and inline <code class="code-inline">;
+always LTR:
+<pre class="code">npm is not used</pre>
+
+skeleton — data-shape="text|title|circle|row"; compose to mirror the final
+layout while loading:
+<span class="skeleton" data-shape="title"></span>
+<span class="skeleton" data-shape="text"></span>
+
+empty — empty/error states; error = data-status="danger" icon + Retry:
+<div class="empty">
+  <span class="empty-icon"><svg …></svg></span>
+  <span class="t-card">No messages yet</span>
+  <p class="t-secondary">Start a conversation and it shows up here.</p>
+  <button class="btn" data-variant="primary">New message</button>
+</div>
+
+alert — inline status panel, one sentence; data-status as badge (default
+neutral). Lead with an icon (alert-triangle/info/circle-check/circle-x):
+<div class="alert" data-status="warning"><span class="icon" data-icon="alert-triangle"></span>
+  <div><span class="alert-title">Storage almost full</span>
+    <p>You have used 90% of your space.</p></div></div>
+
+## Overlays and feedback
+Enhanced pieces need their script tag once per page (plain scripts, no
+modules, no build): <script src="js/x-tabs.js" defer></script> etc.
+js/accordion.js, js/menu.js: ambient enhancements — one script tag,
+no markup changes, work on every matching element already on the page.
+
+dialog — native <dialog>, open with .showModal(); form method="dialog"
+closes it; always confirm before destroying:
+<dialog class="dialog" id="confirm">
+  <form method="dialog" class="stack" data-gap="12">
+    <span class="t-card">Delete this note?</span>
+    <p class="t-secondary">This can't be undone.</p>
+    <div class="row" data-gap="8" data-align="between">
+      <button class="btn" value="cancel">Cancel</button>
+      <button class="btn" data-variant="danger" value="confirm">Delete</button>
+    </div>
+  </form>
+</dialog>
+<button class="btn" onclick="document.getElementById('confirm').showModal()">Delete…</button>
+<!-- react to the choice: the clicked button's value lands in dialog.returnValue -->
+<script>confirm.addEventListener('close', () => {
+  if (confirm.returnValue === 'confirm') { doDelete(); mtui.toast('Deleted', { kind: 'error' }); }
+});</script>
+
+menu — popover attribute + js/menu.js (anchors to the trigger; centered
+without JS). data-danger on destructive items:
+<button class="btn" popovertarget="m1">Options</button>
+<div class="menu" id="m1" popover>
+  <button class="menu-item">Rename</button>
+  <button class="menu-item" data-danger>Delete</button>
+</div>
+
+x-tabs — js/x-tabs.js. Wraps a segmented + [data-panel] siblings; only the
+panel matching the checked value shows; bubbling change, detail.value:
+<x-tabs>
+  <fieldset class="segmented">
+    <label><input type="radio" name="t" value="general" checked><span>General</span></label>
+    <label><input type="radio" name="t" value="privacy"><span>Privacy</span></label>
+  </fieldset>
+  <div data-panel="general">…</div>
+  <div data-panel="privacy">…</div>
+</x-tabs>
+
+toast — js/x-toast.js. JS-only; never the sole carrier of critical info.
+window.mtui is created by the js/*.js scripts (load them with defer; mtui
+exists by the time your handlers fire). Optional { kind: 'tick'|'success'|
+'error' } plays the matching feedback cue (see Feedback):
+mtui.toast('Changes saved')
+mtui.toast('Upload failed', { kind: 'error' })
+mtui.toast('Message deleted', { action: { label: 'Undo', onClick: undo } })
+
+loading pattern — async buttons set data-loading (spinner in place, size
+kept), restore on settle, outcome lands in a toast; failures render in the
+component's own boundary (alert / empty data-status="danger" + Retry):
+btn.setAttribute('data-loading', '');
+await save();
+btn.removeAttribute('data-loading');
+mtui.toast('Changes saved');
+
+## Enhanced inputs — MTUI-drawn faces over native pickers. Never expose raw
+## browser chrome for these; the native element stays as the value holder
+## and no-JS fallback only. Each needs its script tag once per page.
+
+x-select — js/x-select.js. Wraps a Basic field select in place; native
+select stays for form submit + no-JS. Keyboard: arrows, Home/End,
+type-ahead, Enter, Esc. Bubbling change, detail.value:
+<x-select>
+  <label class="field">
+    <span class="t-label">Role</span>
+    <span class="select"><select>
+      <option value="designer">Designer</option>
+      <option value="engineer" selected>Engineer</option>
+    </select></span>
+  </label>
+</x-select>
+
+x-datepicker — js/x-datepicker.js. Single date only (no ranges/times).
+Wraps a Basic field date input. Keyboard: arrows move by day, Enter
+selects, header buttons change month, footer Today jumps + selects. Tap
+the header to zoom out: day grid -> month grid -> scrollable year list
+(auto-centers the current year) -> back to day grid; picking a month or
+year drills back in. Bubbling change, detail.value in native YYYY-MM-DD:
+<x-datepicker>
+  <label class="field">
+    <span class="t-label">Start date</span>
+    <input type="date" min="2026-01-01" max="2026-12-31" value="2026-07-07">
+  </label>
+</x-datepicker>
+
+x-colorswatches — js/x-colorswatches.js. Curated swatches only, never a
+free color wheel. data-colors on the host (comma-separated hex) is the
+one canonical swatch source. Wraps a Basic field color input. Bubbling
+change, detail.value:
+<x-colorswatches data-colors="#BC4B2A,#3556C9,#2F7A50,#6E46BD,#7A5600">
+  <label class="field">
+    <span class="t-label">Tag color</span>
+    <input type="color" value="#BC4B2A">
+  </label>
+</x-colorswatches>
+
+x-contextmenu — js/x-contextmenu.js. Wraps any region; opens on right-click,
+long-press (~500ms), OR a click on any [data-contextmenu-trigger] inside it
+(a visible tap affordance — gesture-only is undiscoverable on touch). A
+<template> child declares the menu (reuses .menu-item styling). No JS: the
+browser's native context menu appears. Bubbling select, detail = { value,
+target }: value is the item's data-value; target is the element the menu
+opened on. Wrap a whole LIST in one x-contextmenu — detail.target.closest(
+'.item') tells you which row fired (no per-row menus):
+<x-contextmenu>
+  <div class="screen-list">
+    <div class="item" data-id="42">
+      <span class="item-text"><span class="item-title">Weekly sync</span></span>
+      <button class="btn" data-size="icon" data-contextmenu-trigger aria-haspopup="menu" aria-label="Actions"><span class="icon" data-icon="more-vertical"></span></button>
+    </div>
+  </div>
+  <template>
+    <button class="menu-item" data-value="rename">Rename</button>
+    <button class="menu-item" data-value="delete" data-danger>Delete</button>
+  </template>
+</x-contextmenu>
+<script>addEventListener('select', e => {
+  const row = e.detail.target.closest('.item');   // which row
+  doThing(e.detail.value, row?.dataset.id);        // which action
+});</script>
+
+pull-to-refresh (x-pull-refresh) — js/pull-refresh.js. Wraps a
+.screen-list (touch only). Pulling past the threshold dispatches a
+bubbling `refresh` event; call detail.done() when the app's async work
+finishes — the app decides what to show (usually mtui.toast()):
+<x-pull-refresh>
+  <div class="screen-list">…</div>
+</x-pull-refresh>
+list.addEventListener('refresh', (e) => {
+  loadMessages().then(() => { e.detail.done(); mtui.toast('Updated'); });
+});
+
+## Feedback — synthetic sound (WebAudio) + haptics, opt-in via
+## data-feedback. Nothing fires without a matching visible event — never on
+## hover or scroll. One script tag, no markup changes to existing components.
+
+feedback — js/feedback.js. Cues: tick, toggle-on, toggle-off, success, error
+(gain ≤ 0.06; vibrate 8ms on toggles/confirmations, [20,40,20] on errors).
+Global mute persists to localStorage; play() and haptics no-op silently when
+muted, unsupported, or before a user gesture has unlocked audio:
+mtui.feedback.muted            // get
+mtui.feedback.muted = true     // set, persists
+mtui.feedback.play('tick')     // fire a cue directly
+
+data-feedback opts an element into its cue, same attribute everywhere:
+<input type="checkbox" class="switch" data-feedback>            <!-- toggle-on/off on change -->
+<button class="btn" data-feedback>Confirm</button>              <!-- success on click -->
+<div class="alert" data-status="danger" data-feedback>…</div>   <!-- error when it mounts -->
+mtui.toast('Saved', { kind: 'success' })                        <!-- tick | success | error -->
+
+## Custom theme — brands may generate a custom PRIMARY (--accent) and a
+## distinct ACCENT (--accent-2) beyond the 4 presets. Hue is free; chroma/
+## lightness clamped by §2.14 so contrast survives. --accent-2 defaults to
+## mirror --accent (monochrome); set it apart for a two-color brand.
+
+Generate the block in the showcase (demo/index.html → "Custom theme": pick
+Primary + Accent hue/chroma, copy the output), paste it after tokens.css,
+then set data-accent="custom" on <html>. The surface tint follows the primary.
+Output shape (values are oklch(); light + dark supplied):
+[data-accent="custom"] {
+  --accent: oklch(52% C H);   --accent-2: oklch(52% C2 H2);   /* +hover/text/tint each */
+}
+[data-theme="dark"][data-accent="custom"] {
+  --accent-text: oklch(84% .45C H); --accent-tint: oklch(30% .35C H);   /* + --accent-2-* */
+}
+
+## Telegram mini apps — js/telegram.js maps the host theme onto MTUI so the
+## app looks native to the Telegram shell. Load it once; it no-ops outside
+## Telegram (screen keeps the tokens.css defaults, still functional).
+
+<script src="js/telegram.js" defer></script>
+On load and on Telegram's themeChanged it sets data-theme from colorScheme and
+maps themeParams onto MTUI tokens: secondary_bg_color->--bg, bg_color->
+--surface, text_color->--text, hint_color->--text-muted, button_color->--accent
+(+ button_text_color->--on-accent), link_color->--accent-text. The tones
+Telegram doesn't send (--surface-2/-3, --text-faint, --accent-hover,
+--accent-tint) are derived in OKLCH from those host colors — nothing invented.
+mtui.telegram.sync()                     // re-read the live WebApp and apply
+mtui.telegram.apply(themeParams, scheme) // apply given values (e.g. testing)
+
+## Theme controller — <x-theme> (js/x-theme.js) is an in-app appearance panel
+## (Telegram-style): user picks theme + accent + corners + density + surface
+## tint. Writes only to the <html> knobs and persists to localStorage. Drop it
+## anywhere (e.g. a settings screen). Prefer it over the single Dark-mode switch
+## when you want persistence. JS-only: with no JS it's empty, app keeps its theme.
+
+<script src="js/x-theme.js" defer></script>
+<x-theme></x-theme>   <!-- renders its own controls; that's the whole markup -->
+Emits bubbling 'themechange' — detail: { key, value } (key: theme|accent|
+radius|density|tint). Persists to mtui-theme / mtui-accent / mtui-radius /
+mtui-density / mtui-tint; on load, a stored value (if a valid option) >
+current <html> attribute > default.

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "morethanui",
+  "version": "1.0.0",
+  "description": "MoreThanUI — a dependency-free, framework-agnostic UI component library. Plain HTML + CSS custom properties + light-DOM custom elements. No build required to use; drop the files in and write markup.",
+  "license": "MIT",
+  "keywords": [
+    "ui",
+    "components",
+    "css",
+    "web-components",
+    "custom-elements",
+    "design-system",
+    "no-build",
+    "dependency-free",
+    "framework-agnostic",
+    "tauri",
+    "telegram-mini-app"
+  ],
+  "files": [
+    "css",
+    "js",
+    "fonts",
+    "dist",
+    "llms.txt",
+    "DESIGN.md"
+  ],
+  "sideEffects": [
+    "./js/*.js",
+    "./css/*.css",
+    "./dist/*.js",
+    "./dist/*.css"
+  ],
+  "exports": {
+    ".": "./dist/mtui.min.js",
+    "./style.css": "./dist/mtui.min.css",
+    "./css/*": "./css/*",
+    "./js/*": "./js/*",
+    "./fonts/*": "./fonts/*",
+    "./dist/*": "./dist/*",
+    "./llms.txt": "./llms.txt",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "bundle": "bash scripts/bundle.sh",
+    "test": "bash scripts/test.sh",
+    "prepublishOnly": "bash scripts/bundle.sh"
+  }
+}