@soadtech/cli 0.1.0

package/registry/components/Persona/MessageDropdown.module.css

@@ -0,0 +1,76 @@
+/* ═══ MessageDropdown ═══ */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+  max-height: 520px;
+  background-color: var(--st-color-surface);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  box-shadow: var(--st-shadow-lg);
+  overflow: hidden;
+}
+
+/* ─── Header ─── */
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: var(--st-space-4);
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+.title {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-md);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.closeBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  color: var(--st-color-muted);
+  cursor: pointer;
+  transition: color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+}
+
+.closeBtn:hover {
+  color: var(--st-color-foreground);
+  background-color: var(--st-color-neutral-100);
+}
+
+.closeBtn:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+/* ─── Body ─── */
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* ─── Footer ─── */
+
+.footer {
+  flex-shrink: 0;
+  padding: var(--st-space-3) var(--st-space-4);
+  border-top: 1px solid var(--st-color-border);
+}
+
+.footerBtn {
+  width: 100%;
+}

package/registry/components/Persona/MessageDropdown.tsx

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Button } from '../Button';
+import type { MessageDropdownProps } from './Persona.types';
+import styles from './MessageDropdown.module.css';
+
+function CloseIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M4 4L12 12M12 4L4 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export const MessageDropdown = forwardRef<HTMLDivElement, MessageDropdownProps>(
+  (
+    {
+      title = 'Message',
+      onClose,
+      footerLabel = 'View in message center',
+      onFooterClick,
+      children,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          {onClose && (
+            <button
+              type="button"
+              className={styles.closeBtn}
+              onClick={onClose}
+              aria-label="Close messages"
+            >
+              <CloseIcon />
+            </button>
+          )}
+        </div>
+
+        <div className={styles.body}>{children}</div>
+
+        {onFooterClick && (
+          <div className={styles.footer}>
+            <Button
+              variant="fill"
+              size="sm"
+              className={styles.footerBtn}
+              onClick={onFooterClick}
+            >
+              {footerLabel}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+MessageDropdown.displayName = 'MessageDropdown';

package/registry/components/Persona/Persona.module.css

@@ -0,0 +1,92 @@
+/* ═══ Persona ═══ */
+
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: var(--st-space-2) var(--st-space-3);
+  border-radius: var(--st-radius-md);
+  cursor: pointer;
+  transition: background-color var(--st-transition-fast);
+  font-family: var(--st-font-family);
+}
+
+.root:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.root:active {
+  background-color: var(--st-color-neutral-200);
+}
+
+.root:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+/* ─── Body ─── */
+
+.body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.nameRow {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+}
+
+.name {
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.verifiedBadge {
+  flex-shrink: 0;
+}
+
+.username {
+  color: var(--st-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Chevron ─── */
+
+.chevron {
+  flex-shrink: 0;
+  color: var(--st-color-muted);
+}
+
+/* ─── Sizes ─── */
+
+.lg .name {
+  font-size: var(--st-font-size-md);
+}
+
+.lg .username {
+  font-size: var(--st-font-size-sm);
+}
+
+.md .name {
+  font-size: var(--st-font-size-sm);
+}
+
+.md .username {
+  font-size: var(--st-font-size-xs);
+}
+
+.sm .name {
+  font-size: var(--st-font-size-sm);
+}
+
+.sm .username {
+  font-size: var(--st-font-size-xs);
+}

package/registry/components/Persona/Persona.tsx

@@ -0,0 +1,90 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Avatar } from '../Avatar';
+import type { PersonaProps, PersonaSize } from './Persona.types';
+import styles from './Persona.module.css';
+
+const avatarSizeMap: Record<PersonaSize, 'lg' | 'md' | 'sm'> = {
+  lg: 'lg',
+  md: 'md',
+  sm: 'sm',
+};
+
+export function VerifiedBadge() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      className={styles.verifiedBadge}
+      aria-label="Verified"
+    >
+      <circle cx="7" cy="7" r="7" fill="var(--st-color-primary)" />
+      <path
+        d="M4.5 7L6.2 8.7L9.5 5.3"
+        stroke="#ffffff"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronDown() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      className={styles.chevron}
+    >
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const Persona = forwardRef<HTMLDivElement, PersonaProps>(
+  (
+    {
+      avatarSrc,
+      avatarAlt = '',
+      name,
+      username,
+      verified = false,
+      size = 'md',
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[size], className)}
+        tabIndex={0}
+        {...rest}
+      >
+        <Avatar src={avatarSrc} alt={avatarAlt} size={avatarSizeMap[size]} />
+        <div className={styles.body}>
+          <span className={styles.nameRow}>
+            <span className={styles.name}>{name}</span>
+            {verified && <VerifiedBadge />}
+          </span>
+          {username && <span className={styles.username}>{username}</span>}
+        </div>
+        <ChevronDown />
+      </div>
+    );
+  }
+);
+
+Persona.displayName = 'Persona';

package/registry/components/Persona/Persona.types.ts

@@ -0,0 +1,71 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type PersonaSize = 'lg' | 'md' | 'sm';
+
+export interface PersonaProps extends HTMLAttributes<HTMLDivElement> {
+  /** Image URL */
+  avatarSrc?: string;
+  /** Alt text for avatar */
+  avatarAlt?: string;
+  /** Display name */
+  name: string;
+  /** Username e.g. "@johndoe" */
+  username?: string;
+  /** Show verified badge */
+  verified?: boolean;
+  /** Size variant */
+  size?: PersonaSize;
+}
+
+export interface PersonaMessageProps extends HTMLAttributes<HTMLDivElement> {
+  /** Image URL */
+  avatarSrc?: string;
+  /** Alt text for avatar */
+  avatarAlt?: string;
+  /** Display name */
+  name: string;
+  /** Username e.g. "@johndoe" */
+  username?: string;
+  /** Show verified badge */
+  verified?: boolean;
+  /** Message preview text */
+  message?: string;
+  /** Timestamp e.g. "10m" */
+  time?: string;
+  /** Green badge count (lg/md = number, sm = dot) */
+  badgeCount?: number;
+  /** Blue unread dot */
+  unread?: boolean;
+  /** Size variant */
+  size?: PersonaSize;
+}
+
+export interface PersonaActionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Image URL */
+  avatarSrc?: string;
+  /** Alt text for avatar */
+  avatarAlt?: string;
+  /** Display name (rendered bold) */
+  name: string;
+  /** Action description e.g. "commented on" */
+  actionText?: string;
+  /** Action target e.g. "Project X" (rendered bold) */
+  actionTarget?: string;
+  /** Timestamp e.g. "6 November 2025 - 9:12 PM" */
+  timestamp?: string;
+  /** Size variant */
+  size?: PersonaSize;
+}
+
+export interface MessageDropdownProps extends HTMLAttributes<HTMLDivElement> {
+  /** Header title */
+  title?: string;
+  /** Close button handler */
+  onClose?: () => void;
+  /** Footer button text */
+  footerLabel?: string;
+  /** Footer button click handler */
+  onFooterClick?: () => void;
+  /** Message items */
+  children?: ReactNode;
+}

package/registry/components/Persona/PersonaAction.module.css

@@ -0,0 +1,80 @@
+/* ═══ PersonaAction ═══ */
+
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: var(--st-space-2) var(--st-space-3);
+  border-radius: var(--st-radius-md);
+  cursor: pointer;
+  transition: background-color var(--st-transition-fast);
+  font-family: var(--st-font-family);
+}
+
+.root:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.root:active {
+  background-color: var(--st-color-neutral-200);
+}
+
+.root:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+/* ─── Body ─── */
+
+.body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  gap: var(--st-space-1);
+}
+
+.actionLine {
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+}
+
+.name {
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.target {
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.timestamp {
+  color: var(--st-color-muted);
+}
+
+/* ─── Sizes ─── */
+
+.lg .actionLine {
+  font-size: var(--st-font-size-md);
+}
+
+.lg .timestamp {
+  font-size: var(--st-font-size-sm);
+}
+
+.md .actionLine {
+  font-size: var(--st-font-size-sm);
+}
+
+.md .timestamp {
+  font-size: var(--st-font-size-xs);
+}
+
+.sm .actionLine {
+  font-size: var(--st-font-size-sm);
+}
+
+.sm .timestamp {
+  font-size: var(--st-font-size-xs);
+}

package/registry/components/Persona/PersonaAction.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Avatar } from '../Avatar';
+import type { PersonaActionProps, PersonaSize } from './Persona.types';
+import styles from './PersonaAction.module.css';
+
+const avatarSizeMap: Record<PersonaSize, 'lg' | 'md' | 'sm'> = {
+  lg: 'lg',
+  md: 'md',
+  sm: 'sm',
+};
+
+export const PersonaAction = forwardRef<HTMLDivElement, PersonaActionProps>(
+  (
+    {
+      avatarSrc,
+      avatarAlt = '',
+      name,
+      actionText,
+      actionTarget,
+      timestamp,
+      size = 'md',
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[size], className)}
+        tabIndex={0}
+        {...rest}
+      >
+        <Avatar src={avatarSrc} alt={avatarAlt} size={avatarSizeMap[size]} />
+        <div className={styles.body}>
+          <span className={styles.actionLine}>
+            <strong className={styles.name}>{name}</strong>
+            {actionText && <> {actionText}</>}
+            {actionTarget && <> <strong className={styles.target}>{actionTarget}</strong></>}
+          </span>
+          {timestamp && <span className={styles.timestamp}>{timestamp}</span>}
+        </div>
+      </div>
+    );
+  }
+);
+
+PersonaAction.displayName = 'PersonaAction';

package/registry/components/Persona/PersonaMessage.module.css

@@ -0,0 +1,156 @@
+/* ═══ PersonaMessage ═══ */
+
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: var(--st-space-2) var(--st-space-3);
+  border-radius: var(--st-radius-md);
+  cursor: pointer;
+  transition: background-color var(--st-transition-fast);
+  font-family: var(--st-font-family);
+}
+
+.root:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.root:active {
+  background-color: var(--st-color-neutral-200);
+}
+
+.root:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+/* ─── Body ─── */
+
+.body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  gap: var(--st-space-1);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--st-space-2);
+}
+
+.nameRow {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  min-width: 0;
+}
+
+.name {
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.username {
+  color: var(--st-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  flex-shrink: 0;
+}
+
+.time {
+  color: var(--st-color-muted);
+  white-space: nowrap;
+}
+
+.message {
+  color: var(--st-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Unread dot ─── */
+
+.unreadDot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-primary);
+  flex-shrink: 0;
+}
+
+/* ─── Badge area ─── */
+
+.badgeArea {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--st-space-1);
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-success);
+  color: #ffffff;
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: 1;
+}
+
+.badgeDot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-success);
+}
+
+/* ─── Sizes ─── */
+
+.lg .name {
+  font-size: var(--st-font-size-md);
+}
+
+.lg .username,
+.lg .time,
+.lg .message {
+  font-size: var(--st-font-size-sm);
+}
+
+.md .name {
+  font-size: var(--st-font-size-sm);
+}
+
+.md .username,
+.md .time,
+.md .message {
+  font-size: var(--st-font-size-xs);
+}
+
+.sm .name {
+  font-size: var(--st-font-size-sm);
+}
+
+.sm .username,
+.sm .time,
+.sm .message {
+  font-size: var(--st-font-size-xs);
+}