PTT fixes, TDS expansions, performance hooks, state event renderers
PTT fixes (BUG-7/8/9): - BUG-7: Fix isEditable to use ownerDocument.body (works in EC iframe context) - BUG-8: Release mic if callEmbed changes during active PTT (cleanup fn) - BUG-9: Wire iframe blur/focus listeners for stuck-mic prevention PiP bug fix (BUG-11): - Track prevPipMode ref so position only resets when first entering pip mode, not on every callVisible change (user drag position preserved) GIF improvements (BUG-15): - Show user-visible error text in toolbar on GIF send failure - Also surface size-limit rejection with a 4-second auto-clearing message Performance: - useInterval: replace useMemo with useEffect for setInterval (React StrictMode safe) - usePan: add unmount cleanup effect to remove document mousemove/mouseup listeners Feature: timeline state event renderers (low effort, high value): - Added renderers for RoomEncryption, RoomJoinRules, RoomGuestAccess, RoomCanonicalAlias - These were silently falling through to the hidden-events fallback TDS (Lotus Terminal Design System): - Fix: correct 8 escaped template literals in GIF picker light-mode block - Add data-emoji-board attribute to EmojiBoardLayout for stable CSS targeting - Add Tooltip panel styles (dark + light mode) - Add Switch toggle styles (dark + light mode) - Add Spinner stroke colors (dark + light mode) - Add EmojiBoard panel styles (dark + light mode) - Add PopOut/Menu/floating panel styles (dark + light mode)
This commit is contained in:
Lotus Bot
+118
-8
@@ -688,8 +688,8 @@ globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-url-p
|
||||
|
||||
// ── GIF picker light TDS (dark-mode rules already exist via [data-gif-terminal]) ──
|
||||
globalStyle(
|
||||
`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] input,` +
|
||||
`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] form`, {
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] form`, {
|
||||
background: '#f4f6fa !important' as any,
|
||||
color: '#111827 !important' as any,
|
||||
border: '1px solid rgba(196,78,0,0.28) !important' as any,
|
||||
@@ -697,23 +697,133 @@ globalStyle(
|
||||
fontSize: '12px !important' as any,
|
||||
boxShadow: 'none !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] input:focus`, {
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input:focus`, {
|
||||
borderColor: 'rgba(196,78,0,0.60) !important' as any,
|
||||
boxShadow: '0 0 0 2px rgba(196,78,0,0.12) !important' as any,
|
||||
outline: 'none !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] input::placeholder`, {
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input::placeholder`, {
|
||||
color: 'rgba(196,78,0,0.45) !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] svg,` +
|
||||
`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] button[type="reset"]`, {
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] svg,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] button[type="reset"]`, {
|
||||
display: 'none !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-track`, {
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-track`, {
|
||||
background: '#e2e7ef',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.\${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-thumb`, {
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-thumb`, {
|
||||
background: 'rgba(196,78,0,0.35)',
|
||||
borderRadius: '2px',
|
||||
});
|
||||
|
||||
// ── Tooltip TDS ──────────────────────────────────────────────────────────────
|
||||
globalStyle(`body.${lotusTerminalBodyClass} ._6plmi2g > div`, {
|
||||
background: '#060c14 !important' as any,
|
||||
border: '1px solid rgba(0,212,255,0.30) !important' as any,
|
||||
color: '#b0cbe8 !important' as any,
|
||||
fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important" as any,
|
||||
fontSize: '11px !important' as any,
|
||||
borderRadius: '4px !important' as any,
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,212,255,0.08) !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._6plmi2g > div`, {
|
||||
background: '#f0f4fc !important' as any,
|
||||
border: '1px solid rgba(0,98,184,0.30) !important' as any,
|
||||
color: '#2d3d56 !important' as any,
|
||||
});
|
||||
|
||||
// ── Switch toggle TDS ─────────────────────────────────────────────────────────
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [role="switch"]`, {
|
||||
background: 'rgba(0,212,255,0.12) !important' as any,
|
||||
border: '1px solid rgba(0,212,255,0.30) !important' as any,
|
||||
borderRadius: '99px !important' as any,
|
||||
transition: 'background 0.2s, border-color 0.2s',
|
||||
});
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [role="switch"][aria-checked="true"]`, {
|
||||
background: 'rgba(255,107,0,0.22) !important' as any,
|
||||
borderColor: 'rgba(255,107,0,0.60) !important' as any,
|
||||
boxShadow: '0 0 8px rgba(255,107,0,0.20) !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [role="switch"]`, {
|
||||
background: 'rgba(0,98,184,0.10) !important' as any,
|
||||
borderColor: 'rgba(0,98,184,0.35) !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [role="switch"][aria-checked="true"]`, {
|
||||
background: 'rgba(196,78,0,0.18) !important' as any,
|
||||
borderColor: 'rgba(196,78,0,0.55) !important' as any,
|
||||
});
|
||||
|
||||
// ── Spinner TDS ───────────────────────────────────────────────────────────────
|
||||
globalStyle(`body.${lotusTerminalBodyClass} ._31czpko`, {
|
||||
stroke: 'rgba(0,212,255,0.20) !important' as any,
|
||||
});
|
||||
globalStyle(`body.${lotusTerminalBodyClass} ._31czpkp`, {
|
||||
stroke: 'rgba(255,107,0,0.85) !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._31czpko`, {
|
||||
stroke: 'rgba(0,98,184,0.20) !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._31czpkp`, {
|
||||
stroke: 'rgba(196,78,0,0.85) !important' as any,
|
||||
});
|
||||
|
||||
// ── EmojiBoard TDS ────────────────────────────────────────────────────────────
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board]`, {
|
||||
background: '#060c14 !important' as any,
|
||||
border: '1px solid rgba(0,212,255,0.20) !important' as any,
|
||||
borderRadius: '4px !important' as any,
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,212,255,0.08) !important' as any,
|
||||
color: '#b0cbe8 !important' as any,
|
||||
});
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board] input`, {
|
||||
background: 'rgba(0,212,255,0.06) !important' as any,
|
||||
border: '1px solid rgba(0,212,255,0.22) !important' as any,
|
||||
color: '#b0cbe8 !important' as any,
|
||||
fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important" as any,
|
||||
borderRadius: '4px !important' as any,
|
||||
});
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board] input:focus`, {
|
||||
borderColor: 'rgba(255,107,0,0.60) !important' as any,
|
||||
boxShadow: '0 0 0 2px rgba(255,107,0,0.12) !important' as any,
|
||||
outline: 'none !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-emoji-board]`, {
|
||||
background: '#f0f4fc !important' as any,
|
||||
border: '1px solid rgba(0,98,184,0.22) !important' as any,
|
||||
color: '#2d3d56 !important' as any,
|
||||
});
|
||||
|
||||
// ── PopOut / Menu / floating panels TDS ──────────────────────────────────────
|
||||
globalStyle(`body.${lotusTerminalBodyClass} ._1v6ozra1`, {
|
||||
background: '#060c14 !important' as any,
|
||||
border: '1px solid rgba(0,212,255,0.22) !important' as any,
|
||||
borderRadius: '6px !important' as any,
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.80), 0 0 0 1px rgba(0,212,255,0.06) !important' as any,
|
||||
color: '#b0cbe8 !important' as any,
|
||||
});
|
||||
globalStyle(`body.${lotusTerminalBodyClass} ._1fptcza0`, {
|
||||
background: 'transparent !important' as any,
|
||||
});
|
||||
globalStyle(`body.${lotusTerminalBodyClass} ._13tt0gb6`, {
|
||||
color: '#b0cbe8 !important' as any,
|
||||
borderRadius: '3px !important' as any,
|
||||
});
|
||||
globalStyle(`body.${lotusTerminalBodyClass} ._13tt0gb6:hover`, {
|
||||
background: 'rgba(0,212,255,0.08) !important' as any,
|
||||
color: '#00d4ff !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._1v6ozra1`, {
|
||||
background: '#f0f4fc !important' as any,
|
||||
border: '1px solid rgba(0,98,184,0.22) !important' as any,
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.15) !important' as any,
|
||||
color: '#2d3d56 !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._13tt0gb6`, {
|
||||
color: '#2d3d56 !important' as any,
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._13tt0gb6:hover`, {
|
||||
background: 'rgba(0,98,184,0.08) !important' as any,
|
||||
color: '#0062b8 !important' as any,
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user