anentrypoint-design 0.0.150 → 0.0.151

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "anentrypoint-design",
3
- "version": "0.0.150",
3
+ "version": "0.0.151",
4
4
  "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
5
5
  "type": "module",
6
6
  "main": "./dist/247420.js",
@@ -1,6 +1,7 @@
1
1
  // Community surface — matches upstream signatures.
2
2
 
3
3
  import * as webjsx from '../../vendor/webjsx/index.js';
4
+ import { Icon } from './shell.js';
4
5
  const h = webjsx.createElement;
5
6
 
6
7
  export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
@@ -143,9 +144,9 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
143
144
  tag ? h('div', { class: 'cm-user-tag' }, tag) : null
144
145
  ),
145
146
  h('div', { class: 'cm-user-controls' },
146
- h('button', { class: 'cm-user-btn' + (muted ? ' muted' : ''), onclick: onMute, 'aria-label': muted ? 'Unmute microphone' : 'Mute microphone', 'aria-pressed': muted ? 'true' : 'false' }, muted ? '🔇' : '🎤'),
147
- h('button', { class: 'cm-user-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, 'aria-label': deafened ? 'Undeafen' : 'Deafen', 'aria-pressed': deafened ? 'true' : 'false' }, deafened ? '🔕' : '🎧'),
148
- h('button', { class: 'cm-user-btn', onclick: handleSettings, 'aria-label': 'Audio settings', title: 'Open audio settings' }, '')
147
+ h('button', { class: 'cm-user-btn' + (muted ? ' muted' : ''), onclick: onMute, 'aria-label': muted ? 'Unmute microphone' : 'Mute microphone', 'aria-pressed': muted ? 'true' : 'false' }, Icon(muted ? 'mic-off' : 'mic')),
148
+ h('button', { class: 'cm-user-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, 'aria-label': deafened ? 'Undeafen' : 'Deafen', 'aria-pressed': deafened ? 'true' : 'false' }, Icon(deafened ? 'speaker-off' : 'speaker')),
149
+ h('button', { class: 'cm-user-btn', onclick: handleSettings, 'aria-label': 'Audio settings', title: 'Open audio settings' }, Icon('settings'))
149
150
  )
150
151
  );
151
152
  }
@@ -215,7 +216,7 @@ export function ChatHeader({ icon = '#', name, topic, toolbar = [] } = {}) {
215
216
  export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDeafen, onLeave, open } = {}) {
216
217
  return h('div', { class: 'cm-voice-strip' + (open ? ' open' : ''), role: 'region', 'aria-label': 'voice controls' },
217
218
  h('div', { class: 'cm-vs-label' },
218
- h('span', { class: 'cm-vs-channel' }, '🔊 ' + (channelName || 'voice')),
219
+ h('span', { class: 'cm-vs-channel' }, Icon('speaker'), ' ' + (channelName || 'voice')),
219
220
  h('span', { class: 'cm-vs-status' }, status || 'connected')
220
221
  ),
221
222
  h('button', {
@@ -223,13 +224,13 @@ export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDea
223
224
  title: muted ? 'Unmute' : 'Mute',
224
225
  'aria-label': muted ? 'unmute microphone' : 'mute microphone',
225
226
  'aria-pressed': muted ? 'true' : 'false'
226
- }, muted ? '🔇' : '🎤'),
227
+ }, Icon(muted ? 'mic-off' : 'mic')),
227
228
  h('button', {
228
229
  class: 'cm-vs-btn', type: 'button', onclick: onDeafen,
229
230
  title: deafened ? 'Undeafen' : 'Deafen',
230
231
  'aria-label': deafened ? 'undeafen' : 'deafen',
231
232
  'aria-pressed': deafened ? 'true' : 'false'
232
- }, deafened ? '🔕' : '🎧'),
233
+ }, Icon(deafened ? 'speaker-off' : 'speaker')),
233
234
  h('button', {
234
235
  class: 'cm-vs-btn danger', type: 'button', onclick: onLeave,
235
236
  title: 'Leave voice', 'aria-label': 'leave voice channel'
@@ -242,12 +243,12 @@ export function MobileHeader({ title, onMenu, onMembers } = {}) {
242
243
  h('button', {
243
244
  class: 'cm-mh-btn', type: 'button', onclick: onMenu,
244
245
  title: 'Menu', 'aria-label': 'open navigation menu'
245
- }, ''),
246
+ }, Icon('menu')),
246
247
  h('span', { class: 'cm-mh-title' }, title || ''),
247
248
  h('button', {
248
249
  class: 'cm-mh-btn', type: 'button', onclick: onMembers,
249
250
  title: 'Members', 'aria-label': 'show members'
250
- }, '👥')
251
+ }, Icon('members'))
251
252
  );
252
253
  }
253
254
 
@@ -65,6 +65,32 @@ export function Glyph({ children, color, size = 'base' }) {
65
65
  return h('span', { class: 'glyph', style }, children);
66
66
  }
67
67
 
68
+ // Monochrome inline-SVG icons (stroke=currentColor) so chrome reads as one
69
+ // coherent line-icon set instead of multicolor OS emoji. 16px box, 1.6 stroke.
70
+ const ICON_PATHS = {
71
+ 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"/>',
72
+ '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"/>',
73
+ 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"/>',
74
+ 'speaker-off': '<path d="M11 5 6 9H3v6h3l5 4z"/><path d="m17 9 4 6M21 9l-4 6"/>',
75
+ camera: '<rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3z"/>',
76
+ screen: '<rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/>',
77
+ phone: '<path d="M5 4h3l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>',
78
+ members: '<circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0M16 6a3 3 0 0 1 0 6M21 20a6 6 0 0 0-4-5.7"/>',
79
+ menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
80
+ settings: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/>'
81
+ };
82
+ export function Icon(name, { size = 16 } = {}) {
83
+ const inner = ICON_PATHS[name];
84
+ if (!inner) return h('span', { class: 'glyph', 'aria-hidden': 'true' }, '');
85
+ return h('svg', {
86
+ class: 'ds-icon ds-icon-' + name,
87
+ width: String(size), height: String(size), viewBox: '0 0 24 24',
88
+ fill: 'none', stroke: 'currentColor', 'stroke-width': '1.6',
89
+ 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true',
90
+ dangerouslySetInnerHTML: { __html: inner }
91
+ });
92
+ }
93
+
68
94
  export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search } = {}) {
69
95
  return h('header', { class: 'app-topbar', role: 'banner' },
70
96
  Brand({ name: brand, leaf }),
@@ -151,7 +177,7 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
151
177
  class: 'app-side-toggle', type: 'button',
152
178
  'aria-label': 'toggle navigation', 'aria-expanded': 'false', 'aria-controls': 'app-main',
153
179
  onclick: () => toggleSide(),
154
- }, '') : null,
180
+ }, Icon('menu')) : null,
155
181
  topbar || null,
156
182
  crumb || null,
157
183
  h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
@@ -2,6 +2,7 @@
2
2
  // Pure factories returning webjsx vnodes. Class prefix: vx-*.
3
3
 
4
4
  import * as webjsx from '../../vendor/webjsx/index.js';
5
+ import { Icon } from './shell.js';
5
6
  const h = webjsx.createElement;
6
7
 
7
8
  function fmtDur(s) {
@@ -32,7 +33,7 @@ export function PttButton({ state = 'idle', mode = 'ptt', onHoldStart, onHoldEnd
32
33
  ontouchend: (e) => { e.preventDefault(); end(e); }
33
34
  },
34
35
  h('span', { class: 'vx-ptt-glow', 'aria-hidden': 'true' }),
35
- h('span', { class: 'vx-ptt-icon', 'aria-hidden': 'true' }, state === 'idle' ? '🎙' : '●'),
36
+ h('span', { class: 'vx-ptt-icon', 'aria-hidden': 'true' }, state === 'idle' ? Icon('mic') : '●'),
36
37
  h('span', { class: 'vx-ptt-label' }, label)
37
38
  );
38
39
  }
@@ -74,7 +75,7 @@ export function WebcamPreview({ videoStream = null, resolution = '640x480', fps
74
75
  h('div', { class: 'vx-cam-stage' },
75
76
  enabled
76
77
  ? h('video', { class: 'vx-cam-video', ref: videoRef, autoplay: true, muted: true, playsinline: true })
77
- : h('div', { class: 'vx-cam-placeholder' }, h('span', {}, '📷'), h('span', {}, 'Camera off'))
78
+ : h('div', { class: 'vx-cam-placeholder' }, h('span', {}, Icon('camera')), h('span', {}, 'Camera off'))
78
79
  ),
79
80
  h('div', { class: 'vx-cam-controls' },
80
81
  h('select', {
@@ -205,15 +206,15 @@ export function VoiceControls({ muted = false, deafened = false, cameraOn = fals
205
206
  h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, glyph)
206
207
  );
207
208
  return h('div', { class: 'vx-vc', role: 'toolbar', 'aria-label': 'voice controls' },
208
- btn('vx-vc-mic', !muted, muted ? 'Unmute' : 'Mute', muted ? '🔇' : '🎙', onMic),
209
- btn('vx-vc-deafen', !deafened, deafened ? 'Undeafen' : 'Deafen', deafened ? '🔕' : '🔊', onDeafen),
210
- btn('vx-vc-camera', cameraOn, cameraOn ? 'Stop camera' : 'Start camera', '📷', onCamera),
211
- btn('vx-vc-screen', screenShareOn, screenShareOn ? 'Stop sharing' : 'Share screen', '🖥', onScreenShare),
212
- btn('vx-vc-settings', false, 'Voice settings', '', onSettings),
209
+ btn('vx-vc-mic', !muted, muted ? 'Unmute' : 'Mute', Icon(muted ? 'mic-off' : 'mic'), onMic),
210
+ btn('vx-vc-deafen', !deafened, deafened ? 'Undeafen' : 'Deafen', Icon(deafened ? 'speaker-off' : 'speaker'), onDeafen),
211
+ btn('vx-vc-camera', cameraOn, cameraOn ? 'Stop camera' : 'Start camera', Icon('camera'), onCamera),
212
+ btn('vx-vc-screen', screenShareOn, screenShareOn ? 'Stop sharing' : 'Share screen', Icon('screen'), onScreenShare),
213
+ btn('vx-vc-settings', false, 'Voice settings', Icon('settings'), onSettings),
213
214
  h('button', {
214
215
  type: 'button', class: 'vx-vc-btn vx-vc-leave', 'aria-label': 'Leave voice', title: 'Leave voice',
215
216
  onclick: onLeave ? (e) => onLeave(e) : null
216
- }, h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, '📞'))
217
+ }, h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, Icon('phone')))
217
218
  );
218
219
  }
219
220
 
package/src/components.js CHANGED
@@ -4,7 +4,7 @@ import * as webjsx from '../vendor/webjsx/index.js';
4
4
  export const h = webjsx.createElement;
5
5
 
6
6
  export {
7
- Brand, Chip, Btn, Glyph, IconButton, Badge,
7
+ Brand, Chip, Btn, Glyph, Icon, IconButton, Badge,
8
8
  Topbar, Crumb, Side, Status, AppShell,
9
9
  Heading, Lede, Dot, Rail
10
10
  } from './components/shell.js';