npm - @apliteni/apliteni-ui - Versions diffs - 0.2.4 - Mend

@apliteni/apliteni-ui 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/LICENSE +6 -0
package/README.md +159 -0
package/package.json +49 -0
package/src/assets/brand.js +18 -0
package/src/assets/icons.js +36 -0
package/src/components/feedback.js +171 -0
package/src/components/index.js +126 -0
package/src/components/shell.js +46 -0
package/src/components/topbar.js +133 -0
package/src/index.css +19 -0
package/src/index.js +8 -0
package/src/inline.js +55 -0
package/src/styles/badge.css +64 -0
package/src/styles/base.css +127 -0
package/src/styles/button.css +118 -0
package/src/styles/callout.css +69 -0
package/src/styles/card.css +79 -0
package/src/styles/code.css +72 -0
package/src/styles/feedback.css +113 -0
package/src/styles/input.css +155 -0
package/src/styles/layout.css +164 -0
package/src/styles/segmented.css +55 -0
package/src/styles/table.css +51 -0
package/src/styles/topbar.css +199 -0
package/src/tokens/accents.css +92 -0
package/src/tokens/tokens.css +185 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,6 @@
+Copyright (c) Apliteni. All rights reserved.
+This software and associated files (the "Software") are proprietary and
+confidential. Unauthorized copying, distribution, or use of the Software,
+in whole or in part, outside of Apliteni and its authorized products is
+strictly prohibited without prior written permission.

package/README.md ADDED Viewed

@@ -0,0 +1,159 @@
+# @apliteni/apliteni-ui
+The Apliteni design system & UI kit — one source of UI for every product surface
+(the strategy deck, the text portal, `/account`, the operating model, and whatever
+ships next).
+Framework-agnostic **HTML + CSS**, driven entirely by design tokens, themeable dark
+and light with **accent sub-themes**. Showcased and reviewed in **Storybook**, and
+published on **ui.apli.tech**.
+- 🎨 **Live site + Storybook** → [ui.apli.tech](https://ui.apli.tech)
+- 📦 **Package** → `@apliteni/apliteni-ui` (GitHub Packages)
+## Why HTML + CSS (not React)
+The strategy portal (`apliteni/strategy`, `viz/`) server-renders HTML strings
+(`.mjs` modules), not a component framework. So the kit ships the same shape: token
+CSS + component CSS + tiny HTML-string factories. That makes it a *true* single source
+of truth — the portal imports it with no rewrite and no framework drift. Storybook
+(`@storybook/html-vite`) renders exactly what ships.
+## Install
+The package lives in **GitHub Packages** (private to the `apliteni` org). Point the
+`@apliteni` scope at it and authenticate with a GitHub token that has `read:packages`.
+`.npmrc` in the consuming repo:
+```
+@apliteni:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
+```
+Then:
+```bash
+NODE_AUTH_TOKEN=$(gh auth token) npm install @apliteni/apliteni-ui
+```
+In CI, `NODE_AUTH_TOKEN` is the workflow's `GITHUB_TOKEN`. In Docker, pass it as a
+build secret (see the strategy portal's Dockerfile for the pattern).
+## Use it
+```js
+import '@apliteni/apliteni-ui/css';           // once, at app root (needs the Poppins font)
+import { button, card, topbar, wireTopbar } from '@apliteni/apliteni-ui';
+el.innerHTML = topbar({ word: 'Strategy', account: { name, email } })
+             + card({ title: 'Appearance', body: button({ label: 'Save', variant: 'primary' }) });
+wireTopbar(document);                          // theme toggle, menus, segmented, copy buttons
+```
+### Reuse the account page
+The whole `/account` layout (topbar + sticky sidebar + page body) ships as one
+factory, so every product renders the same account shell instead of re-building it:
+```js
+import { accountShell, card, switchToggle, wireTopbar } from '@apliteni/apliteni-ui';
+el.innerHTML = accountShell({
+  word: 'Strategy',                              // the product word in the topbar
+  account: { name, email },                      // signed-in user (drives the avatar menu)
+  active: 'prefs',                               // which sidebar item is current
+  title: 'Preferences',
+  sub: 'How the portal looks and speaks to you.',
+  body: card({ title: 'Appearance', body: switchToggle({ label: 'Reduce motion' }) }),
+});
+wireTopbar(el);                                  // menus, theme toggle, segmented controls
+// Custom sidebar nav? pass `nav: [['prefs','gear','Preferences'], ['billing','wallet','Billing']]`
+```
+Server-rendered apps that inline CSS (like the strategy portal) import the stylesheet
+as **strings** instead:
+```js
+import { tokensCss, topbarCss, cssText } from '@apliteni/apliteni-ui/inline';
+// …inline tokensCss + topbarCss into the <style> you serve.
+```
+## Theming
+Theme is a `data-theme="dark|light"` attribute on `<html>`; accent is an orthogonal
+`data-accent` on top:
+```html
+<html data-theme="dark" data-accent="phoenix">
+```
+Each accent re-points only the accent family (`--accent`, `--purple*`, `--glow-purple`,
+`--ring`, `--grad-*`). Surfaces, text and signal colours (green = live, pink = danger)
+stay put — so **every accent works in both themes** and every component follows with no
+component-level change.
+Shipped accents: **Nebula** (purple, default), **Phoenix** (ember), **Ocean** (azure),
+**Emerald** (jade). Runtime helpers: `applyTheme('light')` / `applyAccent('phoenix')`
+(both persist to `localStorage`); or the `accentPicker()` component wired by `wireTopbar()`.
+## Layout
+```
+src/
+  tokens/tokens.css      # colours, type, spacing, radius, elevation, motion — dark + light
+  tokens/accents.css     # accent sub-themes (data-accent) for both themes
+  styles/*.css           # one file per component (button, card, badge, segmented, input,
+                         #   table, callout, code, topbar, layout)
+  index.css              # bundler entry — import '@apliteni/apliteni-ui/css'
+  inline.js              # CSS as strings for server-render consumers (…/inline)
+  assets/                # brand mark (seedling) + line-icon set
+  components/            # HTML-string factories: button(), card(), badge(), topbar()…
+stories/                 # Storybook: Foundations, Components, Apps
+site/                    # ui.apli.tech landing page + static server
+```
+## Develop
+```bash
+NODE_AUTH_TOKEN=$(gh auth token) npm install
+npm run storybook          # http://localhost:6006
+npm run build-storybook    # -> storybook-static/
+node site/build.mjs        # -> site/public/ (landing + kit.css)
+```
+## Publish (GitHub Packages)
+Versioned publish runs from CI on a GitHub Release:
+```bash
+npm version patch          # or minor / major — bumps package.json + tags
+git push --follow-tags
+gh release create v$(node -p "require('./package.json').version") --generate-notes
+```
+The **Release** workflow (`.github/workflows/release.yml`) then publishes with the
+built-in `GITHUB_TOKEN` (`packages: write`). No manual `npm publish` needed.
+## Deploy (ui.apli.tech)
+`Dockerfile` builds the landing page + Storybook and serves both (`/` and `/storybook`)
+via a zero-dependency static server. Deployed on **Lessly** as its own product, on
+`linux/amd64` (arm64 images fail there). Rebuild + redeploy:
+```bash
+docker buildx build --platform linux/amd64 -t <registry>/ui-apli-tech:latest --push .
+```
+## Adopting into the strategy portal
+The topbar CSS keeps the **same class names** the portal already uses (`.topbar`,
+`.brand`, `.dtsw`, `.toggle`, `.acct`, `.amenu`), and the token names match `viz/`
+verbatim — so migration is subtractive: swap the inlined token/topbar CSS for the
+package's `tokensCss` / `topbarCss` and delete the duplication. The deck (`index.html`)
+stays self-contained for the claude.ai Artifact CSP, baking tokens in via its build step.
+## License
+Proprietary — © Apliteni. See [LICENSE](./LICENSE).

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "@apliteni/apliteni-ui",
+  "version": "0.2.4",
+  "description": "Apliteni shared design system & UI kit — tokens, components and the deck theme, framework-agnostic (HTML + CSS).",
+  "type": "module",
+  "license": "UNLICENSED",
+  "author": "Apliteni",
+  "homepage": "https://ui.apli.tech",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apliteni/apliteni-ui.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.js",
+    "./inline": "./src/inline.js",
+    "./css": "./src/index.css",
+    "./tokens": "./src/tokens/tokens.css",
+    "./accents": "./src/tokens/accents.css"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.js",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build -o storybook-static",
+    "test": "node --test"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/html": "^8.6.14",
+    "@storybook/html-vite": "^8.6.14",
+    "storybook": "^8.6.14",
+    "vite": "^5.4.11"
+  }
+}

package/src/assets/brand.js ADDED Viewed

@@ -0,0 +1,18 @@
+// Apliteni seedling brand mark + wordmark.
+// `p` prefixes gradient ids so multiple marks on one page never collide.
+export const seedling = (p = 'lg', size = 21) => `<svg viewBox="0 0 38 36" width="${size}" height="${Math.round(size * 36 / 38)}" aria-hidden="true"><defs><linearGradient id="${p}1" x1="1" x2="0" y1="0.248" y2="0.752"><stop offset="0" stop-color="rgb(140,198,63)"/><stop offset="1" stop-color="rgb(0,146,69)"/></linearGradient><linearGradient id="${p}2" x1="1" x2="0" y1="0.497" y2="0.503"><stop offset="0" stop-color="rgb(140,198,63)"/><stop offset="1" stop-color="rgb(0,146,69)"/></linearGradient></defs><g transform="translate(1 1)"><path d="M 23.115 33.95 C 22.982 34.379 23.862 31.827 24.095 30.048 C 25.239 21.404 23.879 13.04 15.283 6.191 C 11.018 2.783 5.476 0.988 0 1.235 C 1.974 1.647 3.17 3.705 3.484 5.697 C 3.8 7.673 3.468 9.697 3.7 11.69 C 4.165 15.691 6.953 19.264 10.57 21.108 C 13.84 22.771 17.689 23.1 21.306 22.359 C 21.306 22.359 17.772 13.501 11.234 10.801 C 11.234 10.801 20.062 13.451 22.617 21.981 C 24.31 27.694 23.115 33.951 23.115 33.951 Z" fill="url(#${p}1)"/><path d="M 24.509 17.09 C 24.495 17.045 24.478 17.002 24.459 16.959 C 25.322 13.469 28.425 10.109 30.582 9.089 C 28.392 9.171 24.708 12.546 23.562 14.621 C 22.857 13.042 21.972 11.551 20.924 10.175 C 24.84 6.026 33.851 6.026 35.527 0 C 36.157 3.886 36.157 9.632 34.532 13.221 C 32.988 16.613 29.752 21.454 25.355 20.878 C 25.181 19.594 24.898 18.327 24.509 17.091 Z" fill="url(#${p}2)"/></g></svg>`;
+// The Apliteni mark — a rounded "sub-theme prism" of the four ready-made accents
+// (Nebula / Phoenix / Ocean / Emerald). This is the current mark used everywhere
+// (the landing, the favicon, the brand() lockup below). The legacy seedling above
+// is kept only for backward compatibility. `p` prefixes the clip id so multiple
+// marks on one page never collide.
+export const prism = (p = 'pr', size = 26) =>
+  `<svg viewBox="0 0 32 32" width="${size}" height="${size}" aria-hidden="true"><defs><clipPath id="${p}"><rect x="1" y="1" width="30" height="30" rx="9"/></clipPath></defs><g clip-path="url(#${p})"><rect x="1" y="1" width="15" height="15" fill="#9b5dff"/><rect x="16" y="1" width="15" height="15" fill="#ff6a3d"/><rect x="1" y="16" width="15" height="15" fill="#3b9dff"/><rect x="16" y="16" width="15" height="15" fill="#16c98a"/></g></svg>`;
+// Brand lockup: the prism mark + product word. `word` defaults to "Strategy"
+// (the strategy portal). Uses the prism — the current Apliteni mark — not the
+// legacy seedling (still exported above for anything that needs it).
+export const brand = ({ p = 'lg', word = 'Strategy', size = 22, href = '/' } = {}) =>
+  `<a class="brand" href="${href}" aria-label="Apliteni ${word}">${prism(p, size)}<span>${word}</span></a>`;

package/src/assets/icons.js ADDED Viewed

@@ -0,0 +1,36 @@
+// Line-icon set (24×24, stroke=currentColor). Feather-style, 1.7 stroke.
+// Returned as inner SVG markup; wrap in <svg viewBox="0 0 24 24">…</svg> via icon().
+const P = {
+  gear: '<circle cx="12" cy="12" r="3"/><path d="M19.4 13a7.9 7.9 0 0 0 0-2l1.6-1.3-1.6-2.7-1.9.8a7.6 7.6 0 0 0-1.7-1L15.5 5h-3l-.3 1.8a7.6 7.6 0 0 0-1.7 1l-1.9-.8-1.6 2.7L8.6 11a7.9 7.9 0 0 0 0 2l-1.6 1.3 1.6 2.7 1.9-.8a7.6 7.6 0 0 0 1.7 1l.3 1.8h3l.3-1.8a7.6 7.6 0 0 0 1.7-1l1.9.8 1.6-2.7z"/>',
+  key: '<rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>',
+  chat: '<path d="M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z"/>',
+  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/>',
+  mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>',
+  lock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
+  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  x: '<path d="M18 6 6 18M6 6l12 12"/>',
+  copy: '<rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>',
+  eye: '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>',
+  bolt: '<path d="M13 2 3 14h8l-1 8 10-12h-8z"/>',
+  shield: '<path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/>',
+  cube: '<path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="M3 7l9 5 9-5M12 12v10"/>',
+  compass: '<circle cx="12" cy="12" r="9"/><path d="m15 9-2 6-4 2 2-6z"/>',
+  info: '<circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/>',
+  alert: '<path d="M12 3 2 20h20z"/><path d="M12 9v5M12 17h.01"/>',
+  arrowRight: '<path d="M5 12h14M13 6l6 6-6 6"/>',
+  plug: '<path d="M9 2v6M15 2v6M7 8h10v3a5 5 0 0 1-10 0z"/><path d="M12 16v6"/>',
+  layers: '<path d="m12 2 9 5-9 5-9-5z"/><path d="m3 12 9 5 9-5M3 17l9 5 9-5"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
+  globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z"/>',
+  sparkle: '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2"/>',
+};
+export const icon = (name, cls = '') =>
+  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"${cls ? ` class="${cls}"` : ''}>${P[name] || ''}</svg>`;
+export const iconNames = Object.keys(P);
+export const sun = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
+export const moon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>';

package/src/components/feedback.js ADDED Viewed

@@ -0,0 +1,171 @@
+// Inline feedback widget. Select a passage inside a content area, a "Give
+// feedback" pill appears, click it to open a composer (quoted excerpt + note),
+// Send calls your onSend() and shows a success / error state.
+//
+//   document.body.insertAdjacentHTML('beforeend', feedbackWidget());
+//   wireFeedback({ container: 'main', onSend: async (p) => ({ ok: true }) });
+//
+// The kit owns everything visual + interactive; the app owns the backend
+// (onSend does the POST / issue / whatever) and any deep-link shaping. Styles
+// ship in styles/feedback.css (part of the kit stylesheet). Accent-aware.
+import { esc } from './index.js';
+const IC_MSG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z"/></svg>';
+const IC_LINES = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16M4 12h10M4 19h7"/></svg>';
+const IC_X = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+const CHECK = '<svg class="ui-fbck" viewBox="0 0 150 150" aria-hidden="true"><path class="ui-fbck-t" d="M40 78l24 24 46-50"/><path class="ui-fbck-m" d="M40 78l24 24 46-50"/><path class="ui-fbck-s" d="M40 78l24 24 46-50"/></svg>';
+// The widget markup — append once to the page (e.g. document.body). Copy is
+// static here; behaviour + the dynamic chip/quote come from wireFeedback().
+export function feedbackWidget({
+  label = 'Give feedback',
+  placeholder = "What's off, missing, or worth adding here?",
+  doneTitle = 'Feedback sent. Thank you!',
+  doneBody = 'Thanks — your note is on its way.',
+} = {}) {
+  return `
+<div class="ui-fbpill" data-fb-pill>${IC_MSG}${esc(label)}</div>
+<div class="ui-fbscrim" data-fb-scrim></div>
+<div class="ui-fbcomposer" data-fb-composer role="dialog" aria-modal="true" aria-label="Leave feedback">
+  <div data-fb-form>
+    <div class="ui-fbc__head">
+      <span class="ui-fbc__chip">${IC_LINES}<span data-fb-chip>this page</span></span>
+      <button class="ui-fbc__x" data-fb-close aria-label="Close">${IC_X}</button>
+    </div>
+    <div class="ui-fbc__quote"><span class="ui-fbc__qm">&#8220;</span><q data-fb-quote></q></div>
+    <div class="ui-fbc__body"><textarea data-fb-note maxlength="6000" placeholder="${esc(placeholder)}" aria-label="Your note"></textarea></div>
+    <div class="ui-fbc__err" data-fb-err></div>
+    <div class="ui-fbc__foot">
+      <button class="ui-fbbtn ghost" data-fb-cancel>Cancel</button>
+      <button class="ui-fbbtn primary" data-fb-send disabled><span class="ui-fbc__send" data-fb-sendlb>Send feedback</span></button>
+    </div>
+  </div>
+  <div class="ui-fbc__done" data-fb-done style="display:none">
+    <div class="ui-fbc__ck">${CHECK}</div>
+    <h4>${esc(doneTitle)}</h4>
+    <p>${esc(doneBody)}</p>
+    <div class="row"><button class="ui-fbbtn ghost" data-fb-done-close>Close</button></div>
+  </div>
+</div>`;
+}
+// Pure: the closest ancestor-or-preceding h2|h3 that carries an id, else the
+// first such heading in `root`. Exported for testing.
+export function nearestSection(node, root) {
+  let el = node && node.nodeType === 3 ? node.parentNode : node;
+  while (el && el !== root) {
+    let p = el;
+    while (p) {
+      if (p.tagName && /^H[23]$/.test(p.tagName) && p.id) return p;
+      p = p.previousElementSibling;
+    }
+    el = el.parentElement;
+  }
+  return root ? root.querySelector('h2[id],h3[id]') : null;
+}
+const defaultSection = (h) => {
+  if (!h) return { label: 'this page', title: '', anchor: '' };
+  const t = (h.textContent || '').replace(/\s+/g, ' ').trim();
+  return { label: t, title: t, anchor: h.id || '' };
+};
+// Wire the widget's behaviour. Call once after the markup is mounted.
+//   opts.container  selector or element to watch (default 'main')
+//   opts.onSend     async (payload) => { ok, error? }   — required to submit
+//   opts.minChars   minimum selection length to offer the pill (default 3)
+//   opts.section    (headingEl) => { label, title, anchor }  — override formatting
+// payload = { note, excerpt, anchor, sectionLabel, sectionTitle }
+export function wireFeedback(opts = {}) {
+  const container = typeof opts.container === 'string'
+    ? document.querySelector(opts.container)
+    : (opts.container || document.querySelector('main'));
+  const pill = document.querySelector('[data-fb-pill]');
+  const scrim = document.querySelector('[data-fb-scrim]');
+  const composer = document.querySelector('[data-fb-composer]');
+  if (!container || !pill || !scrim || !composer) return; // widget not mounted
+  const q = (sel) => composer.querySelector(sel);
+  const chip = q('[data-fb-chip]'), quoteEl = q('[data-fb-quote]'), note = q('[data-fb-note]');
+  const form = q('[data-fb-form]'), done = q('[data-fb-done]');
+  const sendBtn = q('[data-fb-send]'), sendLb = q('[data-fb-sendlb]'), errEl = q('[data-fb-err]');
+  const minChars = opts.minChars == null ? 3 : opts.minChars;
+  const sectionFn = typeof opts.section === 'function' ? opts.section : defaultSection;
+  const onSend = typeof opts.onSend === 'function' ? opts.onSend : async () => ({ ok: false, error: 'No submit handler configured.' });
+  let pending = null, markSpan = null;
+  function showPill(range) {
+    const r = range.getBoundingClientRect();
+    if (!r.width && !r.height) return;
+    pill.style.left = (window.scrollX + r.left + r.width / 2) + 'px';
+    pill.style.top = (window.scrollY + r.top) + 'px';
+    pill.classList.add('show');
+  }
+  const hidePill = () => pill.classList.remove('show');
+  function onSelect() {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed || !sel.rangeCount) return hidePill();
+    const range = sel.getRangeAt(0);
+    if (!container.contains(range.commonAncestorContainer)) return hidePill();
+    const text = sel.toString().trim();
+    if (text.length < minChars) return hidePill();
+    const s = sectionFn(nearestSection(range.startContainer, container)) || {};
+    pending = { text, anchor: s.anchor || '', label: s.label || '', title: s.title || '', range: range.cloneRange() };
+    showPill(range);
+  }
+  container.addEventListener('mouseup', () => setTimeout(onSelect, 0));
+  container.addEventListener('keyup', (e) => { if (e.shiftKey || e.key === 'Shift') setTimeout(onSelect, 0); });
+  window.addEventListener('scroll', hidePill, { passive: true });
+  function highlight(range) {
+    try { markSpan = document.createElement('span'); markSpan.className = 'ui-fbmark'; range.surroundContents(markSpan); }
+    catch (e) { markSpan = null; }
+  }
+  function clearHighlight() {
+    if (markSpan && markSpan.parentNode) {
+      const p = markSpan.parentNode;
+      markSpan.replaceWith(document.createTextNode(markSpan.textContent));
+      p.normalize && p.normalize();
+    }
+    markSpan = null;
+  }
+  function open() {
+    if (!pending) return;
+    hidePill();
+    quoteEl.textContent = pending.text.length > 200 ? pending.text.slice(0, 200) + '…' : pending.text;
+    chip.textContent = pending.label || 'this page';
+    note.value = ''; sendBtn.disabled = true; errEl.classList.remove('show');
+    form.style.display = ''; done.style.display = 'none'; sendLb.textContent = 'Send feedback';
+    highlight(pending.range);
+    window.getSelection().removeAllRanges();
+    scrim.classList.add('show'); composer.classList.add('show');
+    setTimeout(() => note.focus(), 60);
+  }
+  pill.addEventListener('mousedown', (e) => e.preventDefault());
+  pill.addEventListener('click', open);
+  function close() { composer.classList.remove('show'); scrim.classList.remove('show'); clearHighlight(); pending = null; }
+  q('[data-fb-close]').addEventListener('click', close);
+  q('[data-fb-cancel]').addEventListener('click', close);
+  q('[data-fb-done-close]').addEventListener('click', close);
+  scrim.addEventListener('click', close);
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && composer.classList.contains('show')) close(); });
+  note.addEventListener('input', () => { sendBtn.disabled = note.value.trim().length === 0; });
+  function fail(msg) {
+    errEl.textContent = msg || 'Could not send just now — try again in a moment.';
+    errEl.classList.add('show'); sendLb.textContent = 'Send feedback'; sendBtn.disabled = false;
+  }
+  sendBtn.addEventListener('click', async () => {
+    if (sendBtn.disabled || !pending) return;
+    errEl.classList.remove('show'); sendBtn.disabled = true; sendLb.innerHTML = '<span class="ui-fbspin"></span>Sending';
+    const payload = { note: note.value.trim(), excerpt: pending.text, anchor: pending.anchor, sectionLabel: pending.label, sectionTitle: pending.title };
+    try {
+      const res = await onSend(payload);
+      if (!res || !res.ok) { fail(res && res.error); return; }
+      form.style.display = 'none'; done.style.display = ''; clearHighlight();
+    } catch (e) { fail(); }
+  });
+}

package/src/components/index.js ADDED Viewed

@@ -0,0 +1,126 @@
+// apliteni-ui component factories — each returns an HTML string, matching the
+// viz/ server-render idiom so the portal can adopt them with no framework.
+import { icon } from '../assets/icons.js';
+const cx = (...a) => a.filter(Boolean).join(' ');
+export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+// ---- Button --------------------------------------------------------------
+export function button({
+  label = 'Button', variant = 'secondary', size = 'md', icon: ic, iconRight,
+  block = false, disabled = false, busy = false, type = 'button', href, iconOnly = false,
+} = {}) {
+  const cls = cx(
+    'ui-btn',
+    variant && `ui-btn--${variant}`,
+    size !== 'md' && `ui-btn--${size}`,
+    block && 'ui-btn--block',
+    iconOnly && 'ui-btn--icon',
+  );
+  const bars = busy ? '<span class="ui-btn__bars"><i></i><i></i></span>' : '';
+  const inner = `${ic ? icon(ic) : ''}${iconOnly ? '' : `<span>${esc(label)}</span>`}${iconRight ? icon(iconRight) : ''}${bars}`;
+  // busy ⇒ disabled (not clickable while it works)
+  const attrs = `class="${cls}"${disabled || busy ? ' disabled aria-disabled="true"' : ''}${busy ? ' aria-busy="true"' : ''}${iconOnly ? ` aria-label="${esc(label)}"` : ''}`;
+  return href
+    ? `<a href="${href}" ${attrs}>${inner}</a>`
+    : `<button type="${type}" ${attrs}>${inner}</button>`;
+}
+// ---- Badge / Pill --------------------------------------------------------
+export function badge(label, variant = 'neutral') {
+  const v = variant === 'neutral' ? '' : `ui-badge--${variant}`;
+  return `<span class="${cx('ui-badge', v)}">${esc(label)}</span>`;
+}
+export function pill(label, variant) {
+  return `<span class="${cx('ui-pill', variant && `ui-pill--${variant}`)}">${esc(label)}</span>`;
+}
+export function statusDot(live = false) {
+  return `<span class="${cx('ui-dot', live && 'is-live')}"></span>`;
+}
+// ---- Card ----------------------------------------------------------------
+export function card({ title, sub, body = '', variant, pad, icon: ic } = {}) {
+  const cls = cx('ui-card', variant && `ui-card--${variant}`, pad && `ui-card--pad-${pad}`);
+  // title/sub are trusted markup (may carry a badge/icon) — not escaped.
+  const head = title
+    ? `<div class="ui-card__title">${ic ? `<span class="ui-card__icon">${icon(ic)}</span>` : ''}${title}</div>${sub ? `<div class="ui-card__sub">${sub}</div>` : ''}`
+    : '';
+  return `<div class="${cls}">${head}${body}</div>`;
+}
+// ---- Segmented control ---------------------------------------------------
+export function segmented({ options = [], active = 0, size, block, name = 'seg' } = {}) {
+  const cls = cx('ui-seg', size && `ui-seg--${size}`, block && 'ui-seg--block');
+  const btns = options.map((o, i) => {
+    const label = typeof o === 'string' ? o : o.label;
+    const val = typeof o === 'string' ? o : (o.value ?? o.label);
+    const on = i === active;
+    return `<button type="button" role="tab" aria-selected="${on}" data-value="${esc(val)}"${on ? ' class="is-active"' : ''}>${esc(label)}</button>`;
+  }).join('');
+  return `<div class="${cls}" role="tablist" data-seg="${name}">${btns}</div>`;
+}
+// ---- Accent picker -------------------------------------------------------
+const ACCENT_SWATCH = {
+  default: 'linear-gradient(135deg,#9b5dff,#6a2dcc)',
+  phoenix: 'linear-gradient(135deg,#ff8a5c,#ff6a3d)',
+  ocean: 'linear-gradient(135deg,#5ab0ff,#3b9dff)',
+  emerald: 'linear-gradient(135deg,#3ad9a0,#16c98a)',
+};
+export function accentPicker({ active = 'default', options = ['default', 'phoenix', 'ocean', 'emerald'] } = {}) {
+  return `<div class="ui-accent-picker" data-accent-group>${options.map((o) =>
+    `<button type="button" data-accent-pick="${o}"${o === active ? ' class="is-active"' : ''} style="--swatch:${ACCENT_SWATCH[o]}" aria-label="${o} accent" title="${o[0].toUpperCase() + o.slice(1)}"></button>`).join('')}</div>`;
+}
+// ---- Field / input -------------------------------------------------------
+export function field({ label, hint, error, control } = {}) {
+  return `<div class="ui-field">${label ? `<label class="ui-field__label">${esc(label)}</label>` : ''}${control || ''}${error ? `<div class="ui-field__error">${icon('alert')}${esc(error)}</div>` : hint ? `<div class="ui-field__hint">${esc(hint)}</div>` : ''}</div>`;
+}
+export function input({ type = 'text', placeholder = '', value = '', icon: ic, invalid, disabled, name } = {}) {
+  const el = `<input class="${cx('ui-input', invalid && 'is-invalid')}" type="${type}" placeholder="${esc(placeholder)}" value="${esc(value)}"${name ? ` name="${name}"` : ''}${disabled ? ' disabled' : ''}>`;
+  if (!ic) return el;
+  return `<div class="ui-input-group"><span class="ui-input-group__icon">${icon(ic)}</span>${el}</div>`;
+}
+export function textarea({ placeholder = '', value = '', rows = 4 } = {}) {
+  return `<textarea class="ui-textarea" rows="${rows}" placeholder="${esc(placeholder)}">${esc(value)}</textarea>`;
+}
+export function checkbox({ label, checked, type = 'checkbox', name } = {}) {
+  return `<label class="ui-check"><input type="${type}"${name ? ` name="${name}"` : ''}${checked ? ' checked' : ''}><span>${label}</span></label>`;
+}
+// `label` becomes the input's accessible name (a bare switch has no visible text,
+// so it needs one). Defaults to "Toggle" so a control is never left unlabelled.
+export function switchToggle({ checked = false, disabled = false, name, label = 'Toggle' } = {}) {
+  return `<label class="ui-switch"><input type="checkbox"${name ? ` name="${name}"` : ''}${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} aria-label="${esc(label)}"><span class="ui-switch__track"></span></label>`;
+}
+// ---- Callout / toast / success ------------------------------------------
+export function callout({ variant, icon: ic = 'info', body } = {}) {
+  return `<div class="${cx('ui-callout', variant && `ui-callout--${variant}`)}"><span class="ui-callout__icon">${icon(ic)}</span><div>${body}</div></div>`;
+}
+export function toast({ variant = 'success', title, body, icon: ic = 'check' } = {}) {
+  return `<div class="${cx('ui-toast', `ui-toast--${variant}`)}"><span class="ui-toast__icon">${icon(ic)}</span><div class="ui-toast__body">${title ? `<div class="ui-toast__title">${esc(title)}</div>` : ''}${body ? `<div>${esc(body)}</div>` : ''}</div><button class="ui-toast__close" aria-label="Dismiss">${icon('x')}</button></div>`;
+}
+export function successPanel({ title = 'Done', sub = '' } = {}) {
+  return `<div class="ui-success"><div class="ui-success__check">${icon('check')}</div><div class="ui-success__title">${esc(title)}</div>${sub ? `<div class="ui-success__sub">${esc(sub)}</div>` : ''}</div>`;
+}
+// ---- Snippet -------------------------------------------------------------
+export function snippet({ label = 'shell', code = '', reveal = false, copy = true } = {}) {
+  return `<div class="${cx('ui-snippet', reveal && 'ui-snippet--reveal')}"><div class="ui-snippet__bar"><span>${esc(label)}</span>${copy ? `<button class="ui-snippet__copy">${icon('copy')}Copy</button>` : ''}</div><pre>${code}</pre></div>`;
+}
+// Tiny shell highlighter: escapes first, then wraps comments/strings/URLs/flags/command.
+// Matches the class names in styles/code.css (.k .f .s .u .c). Ported from viz/account.mjs.
+export const hlShell = (raw) =>
+  esc(raw).replace(
+    /(#[^\n]*)|(&quot;(?:[^&]|&(?!quot;))*&quot;|'[^']*')|(https?:\/\/[^\s"'&]+)|(\B--?[A-Za-z][\w-]*)|(^[a-z][\w.-]*)/gm,
+    (m, c, s, u, f, cmd) =>
+      c ? `<span class="c">${c}</span>`
+        : s ? `<span class="s">${s}</span>`
+        : u ? `<span class="u">${u}</span>`
+        : f ? `<span class="f">${f}</span>`
+        : cmd ? `<span class="k">${cmd}</span>`
+        : m,
+  );
+export { icon };

package/src/components/shell.js ADDED Viewed

@@ -0,0 +1,46 @@
+// Account page shell — topbar + sticky sidebar + page body. Drop it into any
+// product to reuse the exact /account layout: pass the product `word`, the
+// signed-in `account`, the current nav `active` id, and the page `title`/`body`.
+// Call wireTopbar() once after mounting to wire the account menu + theme toggle.
+import { topbar } from './topbar.js';
+import { icon } from './index.js';
+// Default account navigation: [id, icon, label, href?, target?]. Override with
+// the `nav` option. href defaults to `#{id}` — pass your real route (and an
+// optional target) to make each item a working link.
+export const ACCOUNT_NAV = [
+  ['prefs', 'gear', 'Preferences'],
+  ['access', 'key', 'Access &amp; agents'],
+];
+const sidebar = (nav, active) =>
+  `<nav class="ui-side"><div class="cap">Account</div>` +
+  nav.map(([id, ic, label, href, target]) =>
+    `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''}${id === active ? ' class="on"' : ''}>${icon(ic)}${label}</a>`).join('') +
+  `<div class="ssep"></div><a class="out" href="#logout">${icon('logout')}Sign out</a></nav>`;
+export function accountShell({
+  word = 'Account',
+  versions,
+  account = {},
+  nav = ACCOUNT_NAV,
+  active = 'prefs',
+  crumb,
+  title = '',
+  sub = '',
+  body = '',
+} = {}) {
+  return `<div style="position:relative;overflow:hidden;min-height:100vh">
+    <span class="ui-glow ui-glow--purple" style="top:-120px;right:6%;opacity:.35"></span>
+    ${topbar({ word, view: 'text', versions, account: { ...account, active, nav } })}
+    <div class="ui-shell">
+      ${sidebar(nav, active)}
+      <div class="ui-shell__page">
+        <div class="ui-shell__crumbs">Account / <b>${crumb || title}</b></div>
+        <h1>${title}</h1>
+        <div class="sub">${sub}</div>
+        <div class="ui-card-stack">${body}</div>
+      </div>
+    </div>
+  </div>`;
+}