@ktfth/stickjs 3.0.0

package/bin/stickjs.js

@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const fs   = require('fs');
+const path = require('path');
+
+// ── Registry ────────────────────────────────────────────────────────────────
+const registry = require('./registry.json');
+const COMPONENTS = registry.components;
+const NAMES = Object.keys(COMPONENTS);
+
+// ── Paths ───────────────────────────────────────────────────────────────────
+const PKG_ROOT = path.join(__dirname, '..', 'stick-ui');   // source in npm package
+const DEST     = path.resolve(process.cwd(), 'stick-ui');  // user's project
+
+// ── ANSI helpers ────────────────────────────────────────────────────────────
+const RESET = '\x1b[0m';
+const BOLD  = '\x1b[1m';
+const DIM   = '\x1b[2m';
+const GREEN = '\x1b[32m';
+const CYAN  = '\x1b[36m';
+const YELLOW = '\x1b[33m';
+const RED   = '\x1b[31m';
+
+function green(s)  { return GREEN + s + RESET; }
+function cyan(s)   { return CYAN + s + RESET; }
+function yellow(s) { return YELLOW + s + RESET; }
+function red(s)    { return RED + s + RESET; }
+function dim(s)    { return DIM + s + RESET; }
+function bold(s)   { return BOLD + s + RESET; }
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+function copyFile(src, dest) {
+  const dir = path.dirname(dest);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+  fs.copyFileSync(src, dest);
+}
+
+// ── Commands ────────────────────────────────────────────────────────────────
+
+function showHelp() {
+  console.log(`
+${bold('stickjs')} — CLI for Stick.js UI components
+
+${bold('Usage:')}
+  npx stickjs ${cyan('list')}                       List available components
+  npx stickjs ${cyan('add')} <name> [name...]        Add component(s) to ./stick-ui/
+  npx stickjs ${cyan('add')} ${dim('--all')}                   Add all components
+  npx stickjs ${cyan('add')} <name> ${dim('--force')}           Overwrite existing files
+
+${bold('Options:')}
+  ${dim('--help, -h')}    Show this help message
+  ${dim('--all')}         Add every component
+  ${dim('--force')}       Overwrite existing files without warning
+
+${bold('Examples:')}
+  npx stickjs add dialog toast
+  npx stickjs add --all --force
+`);
+}
+
+function listComponents() {
+  console.log(`\n${bold('Available components')} ${dim('(' + NAMES.length + ')')}\n`);
+  const maxLen = Math.max(...NAMES.map(n => n.length));
+  for (const name of NAMES) {
+    const entry = COMPONENTS[name];
+    const plugin = entry.plugin ? yellow(' + plugin') : '';
+    console.log(`  ${cyan(name.padEnd(maxLen))}  ${dim(entry.html)}${plugin}`);
+  }
+  console.log();
+}
+
+function addComponents(args) {
+  const force = args.includes('--force');
+  const all   = args.includes('--all');
+  const names = all
+    ? NAMES
+    : args.filter(a => !a.startsWith('--'));
+
+  if (names.length === 0) {
+    console.log(red('\nError: specify at least one component name, or use --all\n'));
+    console.log(`Run ${cyan('npx stickjs list')} to see available components.\n`);
+    process.exit(1);
+  }
+
+  // Validate names
+  const invalid = names.filter(n => !COMPONENTS[n]);
+  if (invalid.length > 0) {
+    console.log(red('\nUnknown component(s): ') + invalid.join(', '));
+    console.log(`Run ${cyan('npx stickjs list')} to see available components.\n`);
+    process.exit(1);
+  }
+
+  let added = 0;
+  let skipped = 0;
+
+  // Copy CSS on first add (if not present)
+  const cssSrc  = path.join(PKG_ROOT, registry.css);
+  const cssDest = path.join(DEST, registry.css);
+  if (!fs.existsSync(cssDest)) {
+    copyFile(cssSrc, cssDest);
+    console.log(green('  + ') + dim('stick-ui.css'));
+  }
+
+  for (const name of names) {
+    const entry = COMPONENTS[name];
+
+    // HTML file
+    const htmlSrc  = path.join(PKG_ROOT, entry.html);
+    const htmlDest = path.join(DEST, name + '.html');
+
+    if (fs.existsSync(htmlDest) && !force) {
+      console.log(yellow('  ~ ') + name + '.html' + dim(' (exists, use --force to overwrite)'));
+      skipped++;
+      continue;
+    }
+
+    copyFile(htmlSrc, htmlDest);
+    console.log(green('  + ') + name + '.html');
+
+    // Plugin file
+    if (entry.plugin) {
+      const pluginSrc  = path.join(PKG_ROOT, entry.plugin);
+      const pluginDest = path.join(DEST, 'plugins', path.basename(entry.plugin));
+
+      if (fs.existsSync(pluginDest) && !force) {
+        console.log(yellow('  ~ ') + 'plugins/' + path.basename(entry.plugin) + dim(' (exists, use --force)'));
+        skipped++;
+      } else {
+        copyFile(pluginSrc, pluginDest);
+        console.log(green('  + ') + 'plugins/' + path.basename(entry.plugin));
+      }
+    }
+
+    added++;
+  }
+
+  console.log(`\n${bold('Done:')} ${green(added + ' added')}, ${yellow(skipped + ' skipped')}\n`);
+}
+
+// ── Main ────────────────────────────────────────────────────────────────────
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (!command || command === '--help' || command === '-h') {
+  showHelp();
+} else if (command === 'list') {
+  listComponents();
+} else if (command === 'add') {
+  addComponents(args.slice(1));
+} else {
+  console.log(red(`\nUnknown command: ${command}`));
+  console.log(`Run ${cyan('npx stickjs --help')} for usage.\n`);
+  process.exit(1);
+}

package/llms.txt

@@ -0,0 +1,244 @@
+# Stick.js
+
+> Declarative behavior for HTML elements via data attributes. Zero dependencies, ~200 lines of vanilla JS.
+
+## Core concept
+
+Annotate any HTML element with `data-stick="event:handler:param"` to attach behavior without writing JavaScript glue code.
+
+```html
+<script src="stick.js"></script>
+
+<button data-stick="click:alert:Hello!">Click me</button>
+<input  data-stick="input:set-text:{{value}}" data-stick-target="#output">
+<div    id="output">mirrored here</div>
+```
+
+## Full syntax
+
+```
+data-stick="event:handler:param"  (trailing colon optional when param is empty — "click:toggle" works)
+data-stick="event:handler"        — shorthand, same as above
+data-stick-delegate=".sel"        — event delegation: listen on el, fire only for matching descendants
+data-stick-target="selector"       — apply to another element
+data-stick-2="event:handler:param" — stack a second behavior (up to data-stick-5)
+data-stick-target-2="#other"       — per-slot target for data-stick-2 (also -3, -4, -5)
+data-stick-once                    — remove listener after first fire
+data-stick-debounce="300"          — debounce N ms
+data-stick-throttle="300"          — throttle N ms
+data-stick-confirm="message"       — require window.confirm() before running
+data-stick-key="Enter"            — only fire on matching KeyboardEvent.key (comma-separated)
+data-stick-prevent                 — always call event.preventDefault() before handler
+data-stick-stop                    — always call event.stopPropagation() before handler
+data-stick-passive                 — addEventListener passive:true (scroll/touch perf)
+data-stick-capture                 — addEventListener capture:true
+data-stick-method="POST"           — HTTP method for fetch handler
+data-stick-swap="beforeend"        — fetch insertion mode (innerHTML|outerHTML|prepend|append|beforeend|afterbegin|…)
+data-stick-loading="Loading…"      — button text while fetch is in-flight
+data-stick-headers='{"Authorization":"Bearer TOKEN"}' — fetch headers (JSON string)
+data-stick-json='{"key":"{{value}}"}' — JSON body for fetch POST
+data-stick-error="#error-el"       — element to show fetch errors in
+data-stick-group="name"            — mutual exclusivity: show/toggle/show-modal hides others in same group
+data-stick-transition="name"       — CSS enter/leave transitions: adds name-enter-active / name-leave-active classes with automatic cleanup
+```
+
+## Target selectors (data-stick-target)
+
+```
+"#id"            querySelector (default)
+"self"           el itself (explicit)
+"siblings"       all sibling elements (same parent, excluding el) — enables tab patterns
+"all:.class"     all elements matching the CSS selector (querySelectorAll)
+"next"           el.nextElementSibling
+"prev"           el.previousElementSibling
+"parent"         el.parentElement
+"closest:form"   el.closest("form")
+```
+
+## Param interpolation (resolved at event time)
+
+```
+{{value}}    el.value
+{{text}}     el.textContent
+{{id}}       el.id
+{{name}}     el.name
+{{checked}}  el.checked → "true"/"false"
+{{index}}    el's position among parent.children (0-based)
+{{length}}   el.children.length
+{{chars}}    el.value.length (or textContent.length) — for character counters
+{{url:key}}  URLSearchParams value from current page URL (e.g. {{url:q}} for ?q=)
+{{data-foo}} el.dataset.foo
+{{href}}     el.getAttribute("href") — any attribute name works
+```
+
+## All built-in handlers
+
+| handler        | description                                          |
+|----------------|------------------------------------------------------|
+| show           | target.hidden = false; auto-manages aria-expanded on trigger |
+| hide           | target.hidden = true; auto-manages aria-expanded on trigger  |
+| toggle         | toggle target.hidden; auto-manages aria-expanded on trigger  |
+| add-class      | target.classList.add(param)                          |
+| remove-class   | target.classList.remove(param)                       |
+| toggle-class   | target.classList.toggle(param)                       |
+| set-text       | target.textContent = param                           |
+| set-html       | target.innerHTML = param                             |
+| set-value      | target.value = param                                 |
+| clear          | target.textContent = ""                              |
+| set-attr       | target.setAttribute(name, value) — param: "name:val" |
+| set-style      | target.style[prop] = value — param: "property:value" |
+| remove-attr    | target.removeAttribute(param)                        |
+| toggle-attr    | toggle attribute presence on target (e.g. "disabled", "open") |
+| clone-template | clone &lt;template&gt; matched by param; resolves {{tokens}} from el; appends to target |
+| sort           | sort target.children by textContent (default) or param key (e.g. "data-price") |
+| count          | set target.textContent to count of querySelectorAll(param) or target.children.length |
+| animate        | target.classList.add(param); auto-removes class after animationend |
+| focus          | target.focus()                                       |
+| scroll-to      | target.scrollIntoView({ behavior: "smooth" })        |
+| copy           | navigator.clipboard.writeText(param or el.textContent)|
+| navigate       | window.location.href = param                         |
+| open           | window.open(param, '_blank', 'noopener')              |
+| back           | window.history.back()                                |
+| forward        | window.history.forward()                             |
+| history-push   | window.history.pushState({}, '', param) — update URL without reload |
+| scroll-top     | window.scrollTo({ top: 0, behavior: 'smooth' }) — back-to-top       |
+| select         | target.select() — select all text in input/textarea  |
+| show-modal     | target.showModal() — native &lt;dialog&gt;                  |
+| close-modal    | target.close(param?) — native &lt;dialog&gt;               |
+| submit         | closest form submit                                  |
+| reset          | closest form reset                                   |
+| prevent        | event.preventDefault()                               |
+| stop           | event.stopPropagation()                              |
+| remove         | target.remove()                                      |
+| disable        | target.disabled = true                               |
+| enable         | target.disabled = false                              |
+| reload         | window.location.reload()                             |
+| print          | window.print()                                       |
+| log            | console.log(param)                                   |
+| alert          | window.alert(param)                                  |
+| dispatch       | target.dispatchEvent(new CustomEvent(param, { bubbles: true, detail: { source: el } })) |
+| emit           | alias for dispatch                                   |
+| store          | localStorage.setItem(key, value) — param: "key:value"|
+| restore        | localStorage.getItem(param) → set target value/text  |
+| fetch          | fetch(param) → inject response into target           |
+| check          | target.checked = true                                |
+| uncheck        | target.checked = false                               |
+| toggle-check   | toggle target.checked                                |
+| set-data       | target.dataset[key] = value — param: "key:value"     |
+| increment      | target value/textContent += step (default 1)         |
+| decrement      | target value/textContent -= step (default 1)         |
+| set-aria       | set ARIA attribute — param: "name:value" (auto-prefixes aria-) |
+| toggle-aria    | flip ARIA boolean attribute true↔false — param: attribute name (auto-prefixes aria-) |
+| intersect      | fires via IntersectionObserver when el enters viewport |
+
+## Error boundary
+
+All handler invocations are wrapped in try/catch. A failing handler is logged to console.error but does not prevent sibling handlers on the same element from running.
+
+## Synthetic events
+
+```
+ready       — fires immediately on bind (before any user interaction)
+watch       — fires immediately on bind, then on every attribute mutation of el (MutationObserver)
+intersect   — IntersectionObserver; fires when element enters viewport
+```
+
+## JavaScript API
+
+```js
+Stick.version              // "3.0.0"
+Stick.add(name, fn)        // register handler; fn(el, param, event, target) => void
+Stick.remove(name)         // unregister handler
+Stick.use(plugin)          // register plugin: fn(stick) | { install } | { name: fn, … }
+Stick.debug(true?)         // enable verbose console logging (dev mode)
+Stick.unbind(el)           // remove all listeners, clear data-stick-bound (allows rebind)
+Stick.handlers             // frozen snapshot of { name: fn, … }
+Stick.init(root?)          // scan and bind [data-stick] under root (default: document)
+Stick.observe(root?)       // MutationObserver auto-bind (default: document.body)
+Stick.parse(value)         // → { event, handler, param } | null
+Stick.fire(el, handler, param?) // invoke handler programmatically (chainable)
+Stick.on(event, fn)        // lifecycle hooks: 'bind', 'unbind' (chainable)
+Stick.bind(el)             // bind a single element
+```
+
+## Custom handler pattern
+
+```js
+Stick.add('my-handler', (el, param, event, target) => {
+  // el     — element with data-stick (the trigger)
+  // param  — string after second colon, with {{tokens}} already resolved
+  // event  — DOM Event (or { type: 'intersect', entry } for intersect)
+  // target — resolved data-stick-target element, or el if none
+});
+```
+
+## LLM usage patterns
+
+When generating HTML with Stick.js, map user intent to attributes:
+
+| Intent | HTML |
+|--------|------|
+| "toggle sidebar on click" | `data-stick="click:toggle" data-stick-target="#sidebar"` |
+| "add loading class while fetching" | `data-stick="click:add-class:loading" data-stick-2="click:fetch:/api/data" data-stick-target="#result"` |
+| "search as user types, debounced" | `data-stick="input:fetch:/search?q={{value}}" data-stick-debounce="300" data-stick-target="#results"` |
+| "confirm before delete" | `data-stick="click:fetch:/api/item/1" data-stick-method="DELETE" data-stick-confirm="Delete?" data-stick-target="parent"` |
+| "lazy load on scroll into view" | `data-stick="intersect:fetch:/api/widget" data-stick-target="#widget" data-stick-once` |
+| "copy link on click" | `data-stick="click:copy:https://example.com"` |
+| "submit form via AJAX" | `data-stick="submit:prevent:" data-stick-2="submit:fetch:/api" data-stick-target="#response"` |
+| "dispatch event for other components" | `data-stick="click:dispatch:user-selected" data-stick-target="#app"` |
+| "increment counter on click" | `data-stick="click:increment:" data-stick-target="#count"` |
+| "decrement with custom step" | `data-stick="click:decrement:5" data-stick-target="#count"` |
+| "check all checkboxes in group" | `data-stick="click:check:" data-stick-target=".cb-item"` |
+| "toggle checkbox on click" | `data-stick="click:toggle-check:" data-stick-target="#my-checkbox"` |
+| "tag element with data attribute" | `data-stick="click:set-data:status:active" data-stick-target="#item"` |
+| "passive scroll listener" | `data-stick="scroll:log:scrolled" data-stick-passive` |
+| "submit form on Enter key" | `data-stick="keydown:submit:" data-stick-key="Enter"` |
+| "close modal on Escape key" | `data-stick="keydown:close-modal:" data-stick-key="Escape" data-stick-target="#my-dialog"` |
+| "open link in new tab" | `data-stick="click:open:https://example.com"` |
+| "show native dialog modal" | `data-stick="click:show-modal:" data-stick-target="#my-dialog"` |
+| "close dialog on button" | `data-stick="click:close-modal:" data-stick-target="closest:dialog"` |
+| "go back in history" | `data-stick="click:back:"` |
+| "add row from template" | `data-stick="click:clone-template:#row-tpl" data-stick-target="#list"` |
+| "toggle details/open" | `data-stick="click:toggle-attr:open" data-stick-target="closest:details"` |
+| "submit form (prevent default)" | `data-stick="submit:fetch:/api/save" data-stick-target="#result" data-stick-prevent` |
+| "stop click propagation" | `data-stick="click:toggle-class:active" data-stick-stop` |
+| "tab interface — active tab" | `data-stick="click:add-class:active" data-stick-2="click:remove-class:active" data-stick-target-2="siblings"` |
+| "show one panel, hide siblings" | `data-stick="click:show" data-stick-target="#panel" data-stick-2="click:hide" data-stick-target-2="all:.panel"` |
+| "restore theme preference on load" | `data-stick="ready:restore:theme" data-stick-target="self"` |
+| "animate element on click" | `data-stick="click:animate:shake" data-stick-target="#icon"` |
+| "character counter" | `data-stick="input:set-text:{{chars}}/280" data-stick-target="#count"` |
+| "dispatch with list index" | `data-stick="click:dispatch:item-click:{{index}}"` |
+| "register a plugin" | `Stick.use({ 'my-handler': (el, p, e, t) => { ... } })` |
+| "unbind element for cleanup" | `Stick.unbind(el)` |
+| "hide all matching elements" | `data-stick="click:hide:" data-stick-target="all:.notification"` |
+| "update URL without reload" | `data-stick="click:history-push:/new-path"` |
+| "select all text on focus" | `data-stick="focus:select" data-stick-target="self"` |
+| "react to data-attribute changes" | `data-stick="watch:set-text:{{data-count}}" data-stick-target="#display"` |
+| "toggle without trailing colon" | `data-stick="click:toggle" data-stick-target="#panel"` |
+| "dynamic list — delete item" | `data-stick="click:remove" data-stick-target="parent" data-stick-delegate=".item"` |
+| "back to top button" | `data-stick="click:scroll-top"` |
+| "pre-fill input from URL param" | `data-stick="ready:set-value:{{url:q}}" data-stick-target="self"` |
+| "remove item by id (delegation)" | `data-stick="click:fetch:/api/item/{{data-id}}" data-stick-method="DELETE" data-stick-delegate="[data-id]" data-stick-target="parent"` |
+| "set aria-expanded on click" | `data-stick="click:set-aria:expanded:true" data-stick-target="#menu"` |
+| "toggle aria-checked" | `data-stick="click:toggle-aria:checked" data-stick-target="self"` |
+| "exclusive accordion panels" | `data-stick="click:show" data-stick-target="#panel1" data-stick-group="accordion"` |
+| "fade-in transition on show" | `data-stick="click:show" data-stick-target="#box" data-stick-transition="fade"` |
+| "fire handler programmatically" | `Stick.fire(el, 'toggle-class', 'active')` |
+| "listen for bind events" | `Stick.on('bind', el => console.log('bound', el))` |
+| "add task from input on Enter" | `data-stick="keydown:clone-template:#task-tpl" data-stick-key="Enter" data-stick-target="#list"` (template uses {{value}}) |
+| "sort list alphabetically" | `data-stick="click:sort" data-stick-target="#list"` |
+| "sort by data attribute" | `data-stick="click:sort:data-price" data-stick-target="#list"` |
+| "count matching items" | `data-stick="click:count:.item" data-stick-target="#count"` |
+| "fetch and prepend results" | `data-stick="click:fetch:/api/more" data-stick-swap="prepend" data-stick-target="#list"` |
+
+## Install
+
+```html
+<script src="stick.js"></script>
+```
+
+Script tag placement: put `<script src="stick.js">` BEFORE any `<script>` that registers custom handlers with `Stick.add()`, so handlers are registered before the auto-init `DOMContentLoaded` fires.
+
+```
+npm install stickjs
+```

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ktfth/stickjs",
+  "version": "3.0.0",
+  "description": "Declarative behavior for HTML elements. Zero dependencies.",
+  "main": "stick.js",
+  "types": "stick.d.ts",
+  "exports": {
+    ".": {
+      "require": "./stick.js",
+      "import": "./stick.js",
+      "default": "./stick.js"
+    }
+  },
+  "bin": {
+    "stickjs": "./bin/stickjs.js"
+  },
+  "files": [
+    "stick.js",
+    "stick.d.ts",
+    "llms.txt",
+    "README.md",
+    "CHANGELOG.md",
+    "bin/",
+    "stick-ui/"
+  ],
+  "scripts": {
+    "minify": "npx esbuild stick.js --bundle --minify --outfile=stick.min.js --platform=browser",
+    "test": "echo 'Open test/stick.test.html in a browser to run tests'",
+    "release": "npm run minify && npm publish --access=public && vercel --prod ./docs"
+  },
+  "keywords": ["declarative", "html", "behavior", "htmx", "vanilla", "framework", "no-js", "components", "ui", "cli"],
+  "author": "Kaique Silva <kaique.developer@gmail.com>",
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kaiquekandykoga/Stickjs"
+  }
+}

package/stick-ui/components/accordion.html

@@ -0,0 +1,25 @@
+<!-- Stick UI: Accordion
+     Requires: stick.js
+     Optional: stick-ui.css (for .stk-* styles)
+     For exclusive mode, add data-stick-group="accordion-name" to each content panel.
+-->
+<div class="stk-accordion">
+  <div class="stk-accordion-item">
+    <button class="stk-accordion-trigger" aria-expanded="false"
+            data-stick="click:toggle" data-stick-target="next">
+      Section title
+    </button>
+    <div class="stk-accordion-content" hidden>
+      <p>Section content goes here.</p>
+    </div>
+  </div>
+  <div class="stk-accordion-item">
+    <button class="stk-accordion-trigger" aria-expanded="false"
+            data-stick="click:toggle" data-stick-target="next">
+      Another section
+    </button>
+    <div class="stk-accordion-content" hidden>
+      <p>More content here.</p>
+    </div>
+  </div>
+</div>

package/stick-ui/components/autocomplete.html

@@ -0,0 +1,82 @@
+<!-- Stick UI: Autocomplete
+     Requires: stick.js + stick-ui/plugins/autocomplete.js
+     Optional: stick-ui.css
+-->
+
+<!-- ── Variant 1: Static options (from a hidden <ul>) ─────── -->
+
+<div class="stk-autocomplete" style="width: 300px;">
+  <label class="stk-label" for="lang-input">Programming Language</label>
+  <input id="lang-input"
+         class="stk-autocomplete-input"
+         type="text"
+         placeholder="Search languages…"
+         data-stick="input:autocomplete:#language-list"
+         data-stk-autocomplete-min="1">
+
+  <!-- Hidden source list -->
+  <ul id="language-list" hidden>
+    <li data-value="javascript">JavaScript</li>
+    <li data-value="typescript">TypeScript</li>
+    <li data-value="python">Python</li>
+    <li data-value="rust">Rust</li>
+    <li data-value="go">Go</li>
+    <li data-value="java">Java</li>
+    <li data-value="csharp">C#</li>
+    <li data-value="cpp">C++</li>
+    <li data-value="ruby">Ruby</li>
+    <li data-value="swift">Swift</li>
+    <li data-value="kotlin">Kotlin</li>
+    <li data-value="php">PHP</li>
+  </ul>
+</div>
+
+<!-- ── Variant 2: Remote / programmatic ───────────────────── -->
+
+<!--
+  Remote example: set data-stk-autocomplete-url to your API endpoint.
+  The plugin appends the query string, e.g. /api/search?q=reac
+  Expects a JSON response: ["React","React Native"] or [{label,value}]
+-->
+<div class="stk-autocomplete" style="width: 300px; margin-top: 24px;">
+  <label class="stk-label" for="remote-input">Search Packages</label>
+  <input id="remote-input"
+         class="stk-autocomplete-input"
+         type="text"
+         placeholder="Search npm packages…"
+         data-stick="input:autocomplete"
+         data-stk-autocomplete-url="https://api.example.com/packages?q="
+         data-stk-autocomplete-min="2">
+</div>
+
+<!--
+  Programmatic example: use stkAutocomplete.setOptions() to populate
+  options from your own script or after an API call.
+-->
+<div class="stk-autocomplete" style="width: 300px; margin-top: 24px;">
+  <label class="stk-label" for="custom-input">City</label>
+  <input id="custom-input"
+         class="stk-autocomplete-input"
+         type="text"
+         placeholder="Type a city name…"
+         data-stick="input:autocomplete"
+         data-stk-autocomplete-min="1">
+</div>
+
+<script>
+  // After stick.js and autocomplete.js are loaded:
+  stkAutocomplete.setOptions(document.getElementById('custom-input'), [
+    'New York',
+    'Los Angeles',
+    'Chicago',
+    'Houston',
+    'Phoenix',
+    'San Francisco',
+    'Seattle',
+    'Denver',
+    'Boston',
+    'Miami',
+    'Austin',
+    'Portland'
+  ]);
+</script>

package/stick-ui/components/command-palette.html

@@ -0,0 +1,28 @@
+<!-- Stick UI: Command Palette
+     Requires: stick.js, stick-ui/plugins/command-palette.js
+     Optional: stick-ui.css (for styled palette)
+     Global shortcut: Ctrl+K (Cmd+K on Mac)
+-->
+
+<!-- Button trigger -->
+<button class="stk-btn" data-stick="click:command-palette">
+  Open Command Palette
+  <span class="stk-command-palette-shortcut" style="margin-left:8px">Ctrl+K</span>
+</button>
+
+<!-- Register commands -->
+<script>
+  stkCommandPalette.register([
+    // Navigation group
+    { id: 'nav-home',     label: 'Go to Home',       group: 'Navigation', shortcut: 'G H', action: function() { console.log('Navigate: Home'); } },
+    { id: 'nav-settings', label: 'Go to Settings',   group: 'Navigation', shortcut: 'G S', action: function() { console.log('Navigate: Settings'); } },
+    { id: 'nav-profile',  label: 'Go to Profile',    group: 'Navigation', shortcut: 'G P', action: function() { console.log('Navigate: Profile'); } },
+    { id: 'nav-docs',     label: 'Open Documentation', group: 'Navigation',                 action: function() { console.log('Navigate: Docs'); } },
+
+    // Actions group
+    { id: 'act-theme',    label: 'Toggle Dark Mode',  group: 'Actions', shortcut: 'Ctrl+D', action: function() { document.documentElement.toggleAttribute('data-theme'); } },
+    { id: 'act-copy',     label: 'Copy Current URL',  group: 'Actions', shortcut: 'Ctrl+C', action: function() { navigator.clipboard.writeText(location.href); } },
+    { id: 'act-reload',   label: 'Reload Page',       group: 'Actions', shortcut: 'Ctrl+R', action: function() { location.reload(); } },
+    { id: 'act-print',    label: 'Print Page',        group: 'Actions', shortcut: 'Ctrl+P', action: function() { window.print(); } }
+  ]);
+</script>

package/stick-ui/components/copy-button.html

@@ -0,0 +1,12 @@
+<!-- Stick UI: Copy Button
+     Requires: stick.js
+     Optional: stick-ui.css
+     Copies the param text. Shows "Copied!" feedback for 1.5s.
+-->
+<button class="stk-btn stk-btn-sm"
+        data-stick="click:copy:Text to copy"
+        data-stick-2="click:set-text:Copied!"
+        data-stick-3="click:wait:1500"
+        data-stick-4="click:set-text:Copy">
+  Copy
+</button>