anentrypoint-design 0.0.352 → 0.0.354

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.352",
+  "version": "0.0.354",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",
@@ -112,10 +112,10 @@
   },
   "devDependencies": {
     "axe-core": "^4.12.1",
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.28.1",
     "playwright": "^1.61.1",
     "pngjs": "^7.0.0",
-    "postcss": "^8.5.12",
+    "postcss": "^8.5.19",
     "postcss-prefix-selector": "^2.1.1"
   }
 }

package/src/components/overlay-primitives.js

@@ -315,6 +315,40 @@ export function PermissionMenu({ trigger, categories = [], approved = [], onTogg
         : h('button', { type: 'button', class: 'ov-perm-trigger', ref: refFn }, child || 'Permissions');
 }
 
+// ApprovalPrompt — an inline, in-thread tool-permission card (as opposed to
+// PermissionMenu's settings-style dropdown): shows the tool name + an
+// optional args preview, an optional free-text note the user can attach to
+// their decision (auto-focused, since the note is usually the primary
+// reason to open this card at all), and up to four resolution actions
+// (once/session/all/deny). Mirrors docstudio's chat-approval-prompts.js
+// buildApprovalPrompt shape. The note textarea is entirely optional -
+// omitting `onDecision`'s use of the note arg keeps existing simpler
+// once/deny-only call sites unaffected.
+export function ApprovalPrompt({ toolName, categoryLabel, argsPreview, onDecision, autoFocusNote = true } = {}) {
+    let noteEl = null;
+    const noteRef = (el) => {
+        if (!el || noteEl === el) return;
+        noteEl = el;
+        if (autoFocusNote) queueMicrotask(() => noteEl && noteEl.focus());
+    };
+    const decide = (kind) => { if (onDecision) onDecision(kind, (noteEl && noteEl.value || '').trim()); };
+    return h('div', { class: 'ov-approval', role: 'group', 'aria-label': toolName ? `Permission requested: ${toolName}` : 'Permission requested' },
+        h('div', { class: 'ov-approval-head' },
+            h('span', { class: 'ov-approval-icon' }, Icon('lock', { size: 16 })),
+            h('strong', { class: 'ov-approval-tool' }, toolName || ''),
+            categoryLabel ? h('span', { class: 'ov-approval-cat' }, '- ' + categoryLabel) : null),
+        argsPreview ? h('pre', { class: 'ov-approval-args' }, argsPreview) : null,
+        h('textarea', {
+            class: 'ov-approval-note', ref: noteRef,
+            placeholder: 'Add instructions for the assistant (optional)...',
+        }),
+        h('div', { class: 'ov-approval-actions' },
+            h('button', { type: 'button', class: 'ov-approval-btn ov-approval-btn-primary', onclick: () => decide('once') }, 'Allow once'),
+            h('button', { type: 'button', class: 'ov-approval-btn ov-approval-btn-soft', onclick: () => decide('session') }, 'Allow for session'),
+            h('button', { type: 'button', class: 'ov-approval-btn', onclick: () => decide('all') }, 'Allow all'),
+            h('button', { type: 'button', class: 'ov-approval-btn ov-approval-btn-deny', onclick: () => decide('deny') }, 'Deny')));
+}
+
 // Clamp a fixed-position box to the viewport given desired top-left coords.
 function _clampToViewport(x, y, w, h, margin = CLAMP_MARGIN) {
     const vw = (typeof window !== 'undefined' ? window.innerWidth : 1024);

package/src/components/shell.js

@@ -143,6 +143,7 @@ export function Glyph({ children, color, size = 'base', label } = {}) {
 // Monochrome inline-SVG icons (stroke=currentColor) so chrome reads as one
 // coherent line-icon set instead of multicolor OS emoji. 16px box, 1.6 stroke.
 export const ICON_PATHS = {
+    lock: '<rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>',
     mic: '<path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>',
     'mic-off': '<path d="M9 9v2a3 3 0 0 0 4.5 2.6M15 11V6a3 3 0 0 0-5.9-.8"/><path d="M5 11a7 7 0 0 0 11.5 5.4M12 18v3"/><path d="m4 4 16 16"/>',
     speaker: '<path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/>',

package/src/components.js

@@ -90,7 +90,7 @@ export {
 export {
     Tooltip, Popover, Dropdown, useLongPress, useFloating,
     CommandPalette, EmojiPicker, BootOverlay, SettingsPopover,
-    AuthModal, VideoLightbox, PermissionMenu
+    AuthModal, VideoLightbox, PermissionMenu, ApprovalPrompt
 } from './components/overlay-primitives.js';
 
 export {

package/src/index.js

@@ -104,7 +104,7 @@ export const applyDiff = webjsx.applyDiff;
 
 // spoint kit paint surfaces (loading screen, HUD, editor chrome).
 export { renderLoadingScreen } from './kits/spoint/loading-screen.js';
-export { renderGameHud } from './kits/spoint/game-hud.js';
+export { renderGameHud, Crosshair, AmmoCounter, HealthBar, BoostIndicator } from './kits/spoint/game-hud.js';
 export { renderHostJoinLobby } from './kits/spoint/host-join-lobby.js';
 
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from

package/src/kits/spoint/game-hud.js

@@ -3,6 +3,61 @@
 // -> a vnode the consumer mounts. Pure presentation; the app owns all state.
 // `h` is the consumer's createElement (webjsx) so the tree composes into the
 // app's existing render() return.
+//
+// Composed from four independent primitives below (Crosshair, AmmoCounter,
+// HealthBar, BoostIndicator) -- each takes the same `h` + a narrow slice of
+// props and returns its own vnode, so a consumer that wants a custom HUD
+// layout (e.g. reposition the ammo counter, drop the boost badge) can import
+// just the pieces it needs instead of the whole composed tree.
+
+/** Center-screen aim reticle. No props beyond `h`. */
+export function Crosshair(h) {
+  return h('div', { class: 'sp-hud-crosshair' }, '+')
+}
+
+/**
+ * Ammo readout — `ammo/magazine`, or a reload-progress label while reloading.
+ * @param {Object} [props]
+ * @param {number} [props.ammo=0]
+ * @param {number} [props.magazine=30]
+ * @param {boolean} [props.reloading=false]
+ * @param {number} [props.reloadProgress=0]
+ */
+export function AmmoCounter(h, props = {}) {
+  const { ammo = 0, magazine = 30, reloading = false, reloadProgress = 0 } = props
+  return h('div', { class: 'sp-hud-ammo' },
+    reloading
+      ? h('span', { class: 'sp-hud-ammo-reloading' }, `RELOADING ${reloadProgress}%`)
+      : h('span', null, `${ammo}/${magazine}`)
+  )
+}
+
+/**
+ * Bottom-center health bar with a threshold-colored fill and a numeric label.
+ * @param {Object} [props]
+ * @param {number} [props.hp=100]
+ */
+export function HealthBar(h, props = {}) {
+  const { hp = 100 } = props
+  const hpClass = hp > 60 ? 'sp-hud-hp-high' : hp > 30 ? 'sp-hud-hp-mid' : 'sp-hud-hp-low'
+  return h('div', { class: 'sp-hud-health' },
+    h('div', { class: `sp-hud-health-fill ${hpClass}`, style: `width:${hp}%` }),
+    h('span', { class: 'sp-hud-health-num' }, String(hp))
+  )
+}
+
+/**
+ * Top-right boost badge. Renders nothing while boostSec <= 0 (consumer can
+ * check this before calling too; kept internal so composition stays a
+ * one-liner in renderGameHud).
+ * @param {Object} [props]
+ * @param {number} [props.boostSec=0]
+ */
+export function BoostIndicator(h, props = {}) {
+  const { boostSec = 0 } = props
+  if (boostSec <= 0) return null
+  return h('div', { class: 'sp-hud-boost' }, `BOOSTED ${boostSec}s`)
+}
 
 export function renderGameHud(h, state = {}) {
   const {
@@ -14,19 +69,10 @@ export function renderGameHud(h, state = {}) {
     boostSec = 0,
   } = state
 
-  const hpClass = hp > 60 ? 'sp-hud-hp-high' : hp > 30 ? 'sp-hud-hp-mid' : 'sp-hud-hp-low'
-
   return h('div', { class: 'sp-hud' },
-    h('div', { class: 'sp-hud-crosshair' }, '+'),
-    h('div', { class: 'sp-hud-ammo' },
-      reloading
-        ? h('span', { class: 'sp-hud-ammo-reloading' }, `RELOADING ${reloadProgress}%`)
-        : h('span', null, `${ammo}/${magazine}`)
-    ),
-    h('div', { class: 'sp-hud-health' },
-      h('div', { class: `sp-hud-health-fill ${hpClass}`, style: `width:${hp}%` }),
-      h('span', { class: 'sp-hud-health-num' }, String(hp))
-    ),
-    boostSec > 0 ? h('div', { class: 'sp-hud-boost' }, `BOOSTED ${boostSec}s`) : null
+    Crosshair(h),
+    AmmoCounter(h, { ammo, magazine, reloading, reloadProgress }),
+    HealthBar(h, { hp }),
+    BoostIndicator(h, { boostSec })
   )
 }

package/src/kits/spoint/index.js

@@ -4,7 +4,7 @@
 // through the main bundle entry so spoint can import directly from unpkg.
 
 export { renderLoadingScreen } from './loading-screen.js';
-export { renderGameHud } from './game-hud.js';
+export { renderGameHud, Crosshair, AmmoCounter, HealthBar, BoostIndicator } from './game-hud.js';
 export { renderHostJoinLobby } from './host-join-lobby.js';
 
 export const themeUrl = new URL('./loading-screen.css', import.meta.url).href;