@proulr/sdui-components 0.1.38 → 0.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.38",
+  "version": "0.1.41",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

package/src/catalog/index.ts

@@ -40,3 +40,8 @@ export {
   isAppIconName,
   type AppIconName,
 } from './app-icon-names';
+export {
+  STORY_TEXT_BACKGROUND_OPTIONS,
+  resolveStoryTextBackgroundOption,
+  type StoryTextBackgroundOption,
+} from './story-text-background-catalog';

package/src/catalog/story-text-background-catalog.ts

@@ -0,0 +1,28 @@
+export type StoryTextBackgroundOption = {
+  id: string;
+  backgroundColor: string;
+  textColor: string;
+};
+
+/** Fundos do composer de story em texto — fonte única de cores (sem hex nos apps). */
+export const STORY_TEXT_BACKGROUND_OPTIONS: StoryTextBackgroundOption[] = [
+  { id: 'fuchsia', backgroundColor: '#D946EF', textColor: '#FFFFFF' },
+  { id: 'cyan', backgroundColor: '#00E5FF', textColor: '#001018' },
+  { id: 'rose', backgroundColor: '#FF2D55', textColor: '#FFFFFF' },
+  { id: 'violet', backgroundColor: '#7C3AED', textColor: '#FFFFFF' },
+  { id: 'amber', backgroundColor: '#F59E0B', textColor: '#1A1200' },
+  { id: 'lime', backgroundColor: '#84CC16', textColor: '#102000' },
+  { id: 'sky', backgroundColor: '#38BDF8', textColor: '#001018' },
+  { id: 'slate', backgroundColor: '#1E293B', textColor: '#FFFFFF' },
+  { id: 'black', backgroundColor: '#000000', textColor: '#FFFFFF' },
+  { id: 'white', backgroundColor: '#FFFFFF', textColor: '#111111' },
+];
+
+export function resolveStoryTextBackgroundOption(
+  id: string,
+): StoryTextBackgroundOption {
+  return (
+    STORY_TEXT_BACKGROUND_OPTIONS.find((option) => option.id === id) ??
+    STORY_TEXT_BACKGROUND_OPTIONS[0]!
+  );
+}

package/src/renderer/theme/proulr-theme.ts

@@ -34,6 +34,28 @@ export const m3Colors = {
   online: '#34FF88',
 } as const;
 
+/** Accent/soft por reação Flash (conteúdo) — fonte única, sem hex solto nos apps. */
+export const flashReactionColors = {
+  flash: { accent: m3Colors.secondary, soft: m3Colors.secondaryContainer },
+  fire: { accent: m3Colors.primary, soft: m3Colors.primaryContainer },
+  heart: { accent: '#FF6B8A', soft: 'rgba(255,107,138,0.22)' },
+  eyes: { accent: '#40C4FF', soft: 'rgba(64,196,255,0.22)' },
+  wave: { accent: '#FFD740', soft: 'rgba(255,215,64,0.22)' },
+  chat: { accent: '#B388FF', soft: 'rgba(179,136,255,0.22)' },
+} as const;
+
+/** Paleta estável para nome de remetente em grupos (estilo WhatsApp/Telegram). */
+export const chatGroupSenderPalette = [
+  m3Colors.primary,
+  m3Colors.secondary,
+  m3Colors.tertiary,
+  '#7C4DFF',
+  '#00BFA5',
+  '#FF6D00',
+  '#FF4081',
+  '#40C4FF',
+] as const;
+
 export const m3Shape = {
   cornerExtraSmall: 4,
   cornerSmall: 8,
@@ -76,6 +98,7 @@ export const colors = {
   onlineSoft: 'rgba(52,255,136,0.18)',
   danger: '#FF4444',
   dangerSoft: 'rgba(255,68,68,0.22)',
+  dangerSoft18: 'rgba(239,68,68,0.18)',
   overlay: 'rgba(0,0,0,0.78)',
   surfaceGlass: 'rgba(255,255,255,0.06)',
   /** Pílula / chrome sem BlurView — preto OLED. */
@@ -88,8 +111,40 @@ export const colors = {
   scrollbarThumb: 'rgba(255, 255, 255, 0.28)',
   scrollbarThumbHover: 'rgba(255, 255, 255, 0.45)',
   primary: '#D946EF',
+  primarySoft18: 'rgba(217,70,239,0.18)',
+  primarySoft35: 'rgba(217,70,239,0.35)',
   onSurface: '#FFFFFF',
   onSurfaceVariant: '#A3A3A3',
+  shadow: '#000',
+  whiteAlpha12: 'rgba(255,255,255,0.12)',
+  whiteAlpha16: 'rgba(255,255,255,0.16)',
+  whiteAlpha22: 'rgba(255,255,255,0.22)',
+  whiteAlpha28: 'rgba(255,255,255,0.28)',
+  whiteAlpha35: 'rgba(255,255,255,0.35)',
+  whiteAlpha38: 'rgba(255,255,255,0.38)',
+  whiteAlpha72: 'rgba(255,255,255,0.72)',
+  whiteAlpha78: 'rgba(255,255,255,0.78)',
+  whiteAlpha82: 'rgba(255,255,255,0.82)',
+  blackAlpha10: 'rgba(0,0,0,0.1)',
+  blackAlpha14: 'rgba(0,0,0,0.14)',
+  blackAlpha18: 'rgba(0,0,0,0.18)',
+  blackAlpha28: 'rgba(0,0,0,0.28)',
+  blackAlpha38: 'rgba(0,0,0,0.38)',
+  blackAlpha50: 'rgba(0,0,0,0.5)',
+  blackAlpha55: 'rgba(0,0,0,0.55)',
+  blackAlpha75: 'rgba(0,0,0,0.75)',
+  blackAlpha80: 'rgba(0,0,0,0.8)',
+  blackAlpha85: 'rgba(0,0,0,0.85)',
+  creamAlpha72: 'rgba(250,250,249,0.72)',
+  creamAlpha78: 'rgba(250,250,249,0.78)',
+  creamAlpha82: 'rgba(250,250,249,0.82)',
+  creamAlpha85: 'rgba(250,250,249,0.85)',
+  creamAlpha92: 'rgba(250,250,249,0.92)',
+  orangeSoft14: 'rgba(255,87,51,0.14)',
+  presenceOffline: 'rgba(163,163,163,0.45)',
+  presenceBorder: 'rgba(0,0,0,0.85)',
+  surfaceElevated82: 'rgba(28,28,30,0.82)',
+  surfaceElevated95: 'rgba(28,28,30,0.95)',
 } as const;
 
 export const spacing = {