@apliteni/apliteni-ui 0.2.4 → 0.3.0

package/README.md

@@ -9,7 +9,7 @@ and light with **accent sub-themes**. Showcased and reviewed in **Storybook**, a
 published on **ui.apli.tech**.
 
 - 🎨 **Live site + Storybook** → [ui.apli.tech](https://ui.apli.tech)
-- 📦 **Package** → `@apliteni/apliteni-ui` (GitHub Packages)
+- 📦 **Package** → [`@apliteni/apliteni-ui`](https://www.npmjs.com/package/@apliteni/apliteni-ui) (public npm)
 
 ## Why HTML + CSS (not React)
 
@@ -21,25 +21,12 @@ of truth — the portal imports it with no rewrite and no framework drift. Story
 
 ## 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:
+Published on the **public npm registry** — no scope config, no token:
 
 ```bash
-NODE_AUTH_TOKEN=$(gh auth token) npm install @apliteni/apliteni-ui
+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
@@ -117,15 +104,15 @@ site/                    # ui.apli.tech landing page + static server
 ## Develop
 
 ```bash
-NODE_AUTH_TOKEN=$(gh auth token) npm install
+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)
+## Publish (public npm)
 
-Versioned publish runs from CI on a GitHub Release:
+Versioned publish runs from CI on a GitHub Release (needs the `NPM_TOKEN` secret):
 
 ```bash
 npm version patch          # or minor / major — bumps package.json + tags

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Apliteni shared design system & UI kit — tokens, components and the deck theme, framework-agnostic (HTML + CSS).",
   "type": "module",
   "license": "UNLICENSED",

package/src/assets/icons.js

@@ -25,6 +25,9 @@ const P = {
   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"/>',
+  card: '<rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/>',
+  doc: '<path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M8 13h8M8 17h5"/>',
+  chart: '<path d="M3 3v18h18"/><path d="M8 17v-5M13 17V8M18 17v-8"/>',
 };
 
 export const icon = (name, cls = '') =>

package/src/components/shell.js

@@ -13,8 +13,8 @@ export const ACCOUNT_NAV = [
   ['access', 'key', 'Access & agents'],
 ];
 
-const sidebar = (nav, active) =>
-  `<nav class="ui-side"><div class="cap">Account</div>` +
+const sidebar = (nav, active, cap = 'Account') =>
+  `<nav class="ui-side"><div class="cap">${cap}</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>`;
@@ -25,6 +25,8 @@ export function accountShell({
   account = {},
   nav = ACCOUNT_NAV,
   active = 'prefs',
+  cap = 'Account',
+  showSwitch = false,
   crumb,
   title = '',
   sub = '',
@@ -32,11 +34,11 @@ export function accountShell({
 } = {}) {
   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 } })}
+    ${topbar({ word, view: 'text', showSwitch, versions, account: { ...account, active, nav } })}
     <div class="ui-shell">
-      ${sidebar(nav, active)}
+      ${sidebar(nav, active, cap)}
       <div class="ui-shell__page">
-        <div class="ui-shell__crumbs">Account / <b>${crumb || title}</b></div>
+        <div class="ui-shell__crumbs">${cap} / <b>${crumb || title}</b></div>
         <h1>${title}</h1>
         <div class="sub">${sub}</div>
         <div class="ui-card-stack">${body}</div>

package/src/styles/badge.css

@@ -26,6 +26,22 @@
 .ui-badge--danger { color: var(--pink); background: var(--glow-pink); }
 .ui-badge--archive { color: var(--muted); background: var(--surface); }
 
+/* Semantic status variants — for record/row status in data tables
+   (paid / verified / pending / failed …). Same chip, mapped to meaning. */
+.ui-badge--success { color: var(--green); background: var(--glow-green); }
+.ui-badge--pending { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
+.ui-badge--neutral { color: var(--muted); background: var(--surface-2); }
+
+/* On the white light app the glow-tints wash out — give status chips a solid
+   tinted fill so they read at a glance. */
+:root[data-theme="light"] .ui-badge--success,
+:root[data-theme="light"] .ui-badge--live    { color: #1f7a38; background: #dff3e4; }
+:root[data-theme="light"] .ui-badge--pending,
+:root[data-theme="light"] .ui-badge--warn    { color: #8a5e00; background: #fbedd2; }
+:root[data-theme="light"] .ui-badge--danger  { color: #b7295f; background: #fbe0ea; }
+:root[data-theme="light"] .ui-badge--neutral,
+:root[data-theme="light"] .ui-badge--archive { color: #5c6270; background: #eceff4; }
+
 /* Pill: same shape, sentence case, a touch larger — a metadata chip */
 .ui-pill {
   display: inline-flex;

package/src/styles/card.css

@@ -11,6 +11,19 @@
   position: relative;
 }
 
+/* Light theme is an all-white app, so a filled card can't rely on a darker-
+   than-page surface the way the dark deck does — give it a hairline border +
+   soft shadow to read as a panel. Dark keeps the borderless deck look. */
+:root[data-theme="light"] .ui-card {
+  border: 1px solid var(--border);
+  box-shadow: 0 1px 2px rgba(20, 25, 45, .04), 0 4px 14px rgba(20, 25, 45, .05);
+}
+
+/* A table wider than its card scrolls INSIDE the card instead of bleeding past
+   the rounded corners / clipping its last column. Clipping to the card's
+   border-box also keeps zebra stripes from escaping the radius. */
+.ui-card:has(> .ui-table) { overflow-x: auto; }
+
 /* Vertical stacks space cards with the container's gap — see .ui-card-stack.
    (No `.ui-card + .ui-card` margin: it leaks into grid/flex rows and misaligns.) */
 .ui-card-stack { display: flex; flex-direction: column; gap: var(--space-5); }

package/src/styles/table.css

@@ -34,6 +34,31 @@
 .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); }
 .ui-table--hover tbody tr:hover { background: var(--surface-2); }
 
+/* ── Data-table modifiers (composable) ──────────────────────────────────────
+ * Compose for a dense financial ledger: .ui-table--dense --zebra --hover.
+ *   --dense  compact row rhythm for many-row / many-column data
+ *   --zebra  row striping instead of per-row rules; 2px header rule; the
+ *            (accent) hover tint out-ranks the stripe (defined after it)
+ * Cell helpers: .ui-table__num (right, tabular), .ui-table__code (plain
+ * monospace id — never a boxed code chip inside a table). */
+.ui-table--dense th { padding: 0 14px 10px 0; }
+.ui-table--dense td { padding: 10px 14px; font-size: var(--text-sm); white-space: nowrap; }
+.ui-table--dense th:first-child,
+.ui-table--dense td:first-child { padding-left: 12px; }
+.ui-table--dense th:last-child,
+.ui-table--dense td:last-child { padding-right: 12px; }
+
+.ui-table--zebra th { border-bottom-width: 2px; }
+.ui-table--zebra td { border-bottom: 0; }
+.ui-table--zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
+.ui-table--zebra.ui-table--hover tbody tr:hover td,
+.ui-table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+
+.ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
+.ui-table th.ui-table__num { text-align: right; }
+.ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
+.ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
+
 /* Empty state inside a table area */
 .ui-empty {
   text-align: center;

package/src/tokens/tokens.css

@@ -149,19 +149,21 @@
   --pink: #d63c72;
   --amber: #b5730a;
 
-  --bg: #f6f6f8;
+  /* A WHITE app: the page and cards are both white; cards are delineated by a
+     hairline border + soft shadow (see card.css), not a grey canvas. */
+  --bg: #ffffff;
   --bg-elevated: #ffffff;
   --surface: #ffffff;
-  --surface-2: #f0f1f5;
-  --surface-3: #e7e9f0;
+  --surface-2: #f5f6f9;
+  --surface-3: #eceef3;
   --seg-active-bg: #ffffff; /* white pill raised above the grey track in light */
-  --border: #d7dae2;
-  --border-strong: #c3c7d4;
+  --border: #e4e7ee;
+  --border-strong: #cdd2dc;
 
-  --text: #1e232b;
-  --strong: #0f0f13;
-  --dim: #3d434e;
-  --muted: #565c68;
+  --text: #1a1e27;
+  --strong: #0c0e13;
+  --dim: #3a404b;
+  --muted: #5c6270;
 
   --accent: #6a2dcc;
   --accent-strong: #6a2dcc; /* already dark enough for white text */