@proulr/sdui-components 0.1.61 → 0.1.62

package/package.json

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

package/src/renderer/ui/app-glyphs.tsx

@@ -593,60 +593,45 @@ export function AppChromeFireGlyph({ color = m3Colors.primary, size = 24 }: AppC
   );
 }
 
-/** Right Now — triple droplet / flame cluster (activation + badge). */
+/**
+ * Right Now — flame (🔥). Source SVG: assets/icons/right-now.svg
+ * Outline teardrop + solid inner tongue (reads at 12–24px chrome sizes).
+ */
 export function AppChromeRightNowGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
   const stroke = strokeFor(size);
-  const droplet = (opts: {
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-    rotate: string;
-    filled?: boolean;
-  }) => (
-    <View
-      key={`${opts.left}-${opts.top}`}
-      style={{
-        position: 'absolute',
-        left: opts.left,
-        top: opts.top,
-        width: opts.width,
-        height: opts.height,
-        borderTopLeftRadius: opts.width * 0.55,
-        borderTopRightRadius: opts.width * 0.55,
-        borderBottomLeftRadius: opts.width * 0.5,
-        borderBottomRightRadius: opts.width * 0.15,
-        borderWidth: stroke,
-        borderColor: color,
-        backgroundColor: opts.filled ? color : 'transparent',
-        transform: [{ rotate: opts.rotate }],
-      }}
-    />
-  );
+  const outerW = size * 0.5;
+  const outerH = size * 0.74;
+  const innerW = outerW * 0.4;
+  const innerH = outerH * 0.42;
   return (
     <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {droplet({
-        width: size * 0.28,
-        height: size * 0.42,
-        left: size * 0.36,
-        top: size * 0.08,
-        rotate: '0deg',
-        filled: true,
-      })}
-      {droplet({
-        width: size * 0.26,
-        height: size * 0.38,
-        left: size * 0.12,
-        top: size * 0.32,
-        rotate: '-48deg',
-      })}
-      {droplet({
-        width: size * 0.26,
-        height: size * 0.38,
-        left: size * 0.58,
-        top: size * 0.32,
-        rotate: '48deg',
-      })}
+      <View
+        style={{
+          width: outerW,
+          height: outerH,
+          borderTopLeftRadius: outerW * 0.58,
+          borderTopRightRadius: outerW * 0.58,
+          borderBottomLeftRadius: outerW * 0.46,
+          borderBottomRightRadius: outerW * 0.46,
+          borderWidth: stroke,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          paddingBottom: size * 0.11,
+        }}
+      >
+        <View
+          style={{
+            width: innerW,
+            height: innerH,
+            backgroundColor: color,
+            borderTopLeftRadius: innerW * 0.55,
+            borderTopRightRadius: innerW * 0.55,
+            borderBottomLeftRadius: innerW * 0.42,
+            borderBottomRightRadius: innerW * 0.42,
+          }}
+        />
+      </View>
     </View>
   );
 }