@rpg-engine/long-bow 0.8.228 → 0.8.230

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.228",
+  "version": "0.8.230",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/NPCDialog/NPCDialog.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { NPCDialogText } from './NPCDialogText';
@@ -65,9 +66,8 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
       ) : (
         <>
           <Container>
-            <CloseIcon onPointerDown={onClose}>X</CloseIcon>
             <TextContainer
-              flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
+              flex={type === NPCDialogType.TextAndThumbnail ? '1' : '100%'}
             >
               <NPCDialogText
                 type={type}
@@ -82,6 +82,9 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
             </TextContainer>
             {type === NPCDialogType.TextAndThumbnail && (
               <ThumbnailContainer>
+                <CloseButton onPointerDown={onClose}>
+                  <FaTimes size={12} />
+                </CloseButton>
                 <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
               </ThumbnailContainer>
             )}
@@ -96,20 +99,41 @@ const Container = styled.div`
   display: flex;
   width: 100%;
   height: 100%;
-
   box-sizing: border-box;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: flex-start;
+  align-items: center;
   position: relative;
+  padding: 1rem 1rem 0.5rem 1rem;
 `;
 
-const CloseIcon = styled.p`
+const CloseButton = styled.button`
   position: absolute;
-  top: -1.5rem;
-  right: -0.4rem;
+  top: -12px;
+  right: -12px;
+  width: 26px;
+  height: 26px;
+  background: #000;
+  border: 2px solid #fff;
+  border-radius: 2px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
-  color: white;
-  font-size: 1.1rem !important;
+  z-index: 10;
+  padding: 0;
+  box-shadow: 0 2px 0px rgba(0, 0, 0, 1);
+  transition: all 0.1s;
+
+  &:hover {
+    background: #333;
+    border-color: #eee;
+  }
+  
+  &:active {
+    transform: translateY(2px);
+    box-shadow: 0 0 0px rgba(0, 0, 0, 1);
+  }
 `;
 
 interface ITextContainerProps {
@@ -117,18 +141,34 @@ interface ITextContainerProps {
 }
 
 const TextContainer = styled.div<ITextContainerProps>`
-  flex: ${({ flex }) => flex} 0 0;
-  width: 355px;
+  flex: ${({ flex }) => flex};
+  height: 100%;
+  padding-right: 1.5rem;
+  display: flex;
+  flex-direction: column;
 `;
 
 const ThumbnailContainer = styled.div`
-  flex: 30% 0 0;
+  flex-shrink: 0;
+  position: relative;
+  width: 116px;
+  height: 116px;
+  /* Layered pixel-art borders: inner black -> gold -> outer black */
+  border: 4px solid #1a100c;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 2px #d4a373, 0 0 0 4px #000;
+  background: #3e2723;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
+  align-items: center;
+  margin-right: 8px;
+  padding: 2px;
 `;
 
 const NPCThumbnail = styled.img`
   image-rendering: pixelated;
-  height: 128px;
-  width: 128px;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+  border-radius: 1px;
 `;

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -118,14 +118,24 @@ export const NPCDialogText: React.FC<IProps> = ({
   );
 };
 
-const Container = styled.div``;
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-bottom: 24px;
+`;
 
 const TextContainer = styled.p`
-  font-size: 0.7rem !important;
+  font-size: 0.8rem !important;
+  line-height: 1.6;
   color: white;
   text-shadow: 1px 1px 0px #000000;
   letter-spacing: 1.2px;
   word-break: normal;
+  margin: 0;
+  flex: 1;
 `;
 
 interface IPressSpaceIndicatorProps {
@@ -134,8 +144,11 @@ interface IPressSpaceIndicatorProps {
 
 const PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`
   position: absolute;
-  right: ${({ right }) => right};
-  bottom: 1rem;
-  height: 20.7px;
+  left: 0;
+  bottom: -0.5rem;
+  height: 20px;
+  object-fit: contain;
+  object-position: left;
   image-rendering: -webkit-optimize-contrast;
+  cursor: pointer;
 `;

package/src/components/RadioSelectCard/RadioSelectCard.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface IRadioSelectCardProps {
+  label: string;
+  description?: string;
+  badge?: string;
+  icon?: React.ReactNode;
+  active?: boolean;
+  onClick: () => void;
+  'data-testid'?: string;
+}
+
+/**
+ * Dark RPG-themed radio-style card.
+ * Matches the aesthetic of MarketplaceSettingsPanel OptionCard.
+ * Uses !important overrides to survive RPGUI global CSS.
+ */
+export const RadioSelectCard: React.FC<IRadioSelectCardProps> = ({
+  label,
+  description,
+  badge,
+  icon,
+  active = false,
+  onClick,
+  'data-testid': testId
+}) => {
+  return (
+    <Card $active={active} onClick={onClick} data-testid={testId} type="button">
+      {icon && <IconWrap>{icon}</IconWrap>}
+      <Body>
+        <Label $active={active}>{label}</Label>
+        {description && <Description>{description}</Description>}
+      </Body>
+      {badge && <Badge $active={active}>{badge}</Badge>}
+    </Card>
+  );
+};
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const Card = styled.button<{ $active: boolean }>`
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 0.6rem !important;
+  width: 100% !important;
+  padding: 0.75rem 0.9rem !important;
+  background: ${({ $active }) =>
+    $active ? 'rgba(245, 158, 11, 0.12)' : 'rgba(0, 0, 0, 0.25)'} !important;
+  border: 2px solid
+    ${({ $active }) =>
+      $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.08)'} !important;
+  border-radius: 6px !important;
+  cursor: pointer !important;
+  text-align: left !important;
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
+  font-family: inherit !important;
+  box-sizing: border-box !important;
+
+  &:hover {
+    border-color: ${({ $active }) =>
+      $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.3)'} !important;
+    background: ${({ $active }) =>
+      $active ? 'rgba(245, 158, 11, 0.18)' : 'rgba(255, 255, 255, 0.04)'} !important;
+    box-shadow: ${({ $active }) =>
+      $active
+        ? '0 0 14px rgba(245, 158, 11, 0.3)'
+        : '0 0 8px rgba(255, 255, 255, 0.05)'} !important;
+  }
+
+  &:active {
+    background: rgba(0, 0, 0, 0.5) !important;
+  }
+`;
+
+const IconWrap = styled.span`
+  font-size: 1.4rem !important;
+  line-height: 1 !important;
+  flex-shrink: 0 !important;
+`;
+
+const Body = styled.div`
+  flex: 1 !important;
+  min-width: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 0.2rem !important;
+`;
+
+const Label = styled.span<{ $active: boolean }>`
+  font-size: 0.72rem !important;
+  font-weight: bold !important;
+  color: ${({ $active }) =>
+    $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.9)'} !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.8px !important;
+  line-height: 1.2 !important;
+`;
+
+const Description = styled.span`
+  font-size: 0.62rem !important;
+  color: rgba(255, 255, 255, 0.45) !important;
+  line-height: 1.4 !important;
+`;
+
+const Badge = styled.span<{ $active: boolean }>`
+  flex-shrink: 0 !important;
+  padding: 0.15rem 0.45rem !important;
+  background: ${({ $active }) =>
+    $active ? 'rgba(245, 158, 11, 0.2)' : 'rgba(255, 255, 255, 0.06)'} !important;
+  border: 1px solid
+    ${({ $active }) =>
+      $active ? 'rgba(245, 158, 11, 0.5)' : 'rgba(255, 255, 255, 0.12)'} !important;
+  border-radius: 20px !important;
+  font-size: 0.55rem !important;
+  font-weight: bold !important;
+  letter-spacing: 0.5px !important;
+  text-transform: uppercase !important;
+  color: ${({ $active }) =>
+    $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.45)'} !important;
+  white-space: nowrap !important;
+`;

package/src/components/typography/DynamicText.tsx

@@ -41,9 +41,11 @@ export const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {
 };
 
 const TextContainer = styled.p`
-  font-size: 0.7rem !important;
+  font-size: 0.8rem !important;
+  line-height: 1.6;
   color: white;
   text-shadow: 1px 1px 0px #000000;
   letter-spacing: 1.2px;
   word-break: normal;
+  margin: 0;
 `;

package/src/index.tsx

@@ -63,6 +63,7 @@ export * from './components/QuantitySelector/QuantitySelectorModal';
 export * from './components/Quests/QuestInfo/QuestInfo';
 export * from './components/Quests/QuestList';
 export * from './components/RadioButton';
+export * from './components/RadioSelectCard/RadioSelectCard';
 export * from './components/RangeSlider';
 export * from './components/RPGUI/RPGUIContainer';
 export * from './components/RPGUI/RPGUIRoot';