raft-ui 0.0.1

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "raft-ui",
+  "version": "0.0.1",
+  "description": "React UI components for Raft.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/botiverse/rui.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./cn": {
+      "types": "./src/lib/cn.ts",
+      "development": "./src/lib/cn.ts",
+      "default": "./dist/cn.mjs"
+    },
+    "./wip": {
+      "types": "./src/wip.ts",
+      "development": "./src/wip.ts",
+      "default": "./dist/wip.mjs"
+    },
+    "./styles.css": "./src/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource-variable/geist-mono": "^5.2.8",
+    "@fontsource-variable/space-grotesk": "^5.2.10",
+    "@tanstack/react-hotkeys": "^0.10.0",
+    "cnfast": "^0.0.7",
+    "lucide-react": "^1.21.0",
+    "tailwind-variants": "^3.2.2"
+  },
+  "devDependencies": {
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20260620.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3",
+    "vite-plus": "^0.2.1"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "check": "vp check"
+  }
+}

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,375 @@
+import type { ComponentPropsWithRef } from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui/react";
+import { tv, type VariantProps } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import type { StyledProps } from "../../lib/styled-props.ts";
+
+// Avatar family built on Base UI's Avatar primitive. Compose `<AvatarImage>`,
+// `<AvatarFallback>`, and `<AvatarBadge>` as children; with no children a
+// default `<AvatarFallback>` renders the placeholder. All parts share one
+// `tv()` slots config so theme / type / size styling lives in a single place.
+//
+// The original's avatar fetching (`AgentAvatar` / `GravatarAvatar`, app domain)
+// is dropped: pass a URL via `<AvatarImage src>` and a custom fallback node via
+// `<AvatarFallback>`.
+//
+// `size` is a compact t-shirt scale distilled from the original call-site
+// contexts: xl profile/detail (64), lg mention/large identity (48), md panel
+// header (36), sm list rows (32), xs compact/sidebar rows (20), and 2xs inline
+// preview chips (14). One-off source contexts such as account-tile, members-row,
+// and creator-link no longer get public size names.
+// Brutal border weight follows size: >=32px frames use `border-2`, smaller ones
+// `border`; elegant uses a pseudo-element hairline. `AvatarFallback` /
+// `AvatarBadge` auto-scale to the parent via its `data-size` + `group/avatar`
+// hook; keep their per-step selectors in sync with the `size` scale.
+const avatar = tv({
+  slots: {
+    root: ["group/avatar relative flex shrink-0 items-center justify-center select-none"],
+    image: ["size-full object-cover"],
+    fallback: [
+      "flex size-full items-center justify-center",
+      "[&>svg]:size-4",
+      "group-data-[size=xl]/avatar:[&>svg]:size-6",
+      "group-data-[size=lg]/avatar:[&>svg]:size-6",
+      "group-data-[size=md]/avatar:[&>svg]:size-[18px]",
+      "group-data-[size=sm]/avatar:[&>svg]:size-4",
+      "group-data-[size=xs]/avatar:[&>svg]:size-3",
+      "group-data-[size=2xs]/avatar:[&>svg]:size-2.5",
+    ],
+    badge: [
+      "absolute right-0 bottom-0 z-10 translate-x-1/4 translate-y-1/4 select-none",
+      "inline-flex items-center justify-center rounded-full outline-2 outline-white",
+      "size-2 [&>svg]:hidden",
+      "group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:[&>svg]:block",
+      "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:block",
+      "group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-1.5 group-data-[size=md]/avatar:[&>svg]:block",
+      "group-data-[size=sm]/avatar:size-2",
+      "group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:outline",
+      "group-data-[size=2xs]/avatar:size-1.5 group-data-[size=2xs]/avatar:outline",
+    ],
+    group: ["group/avatar-group flex items-center"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: "border-line-strong",
+        fallback: "text-black",
+        badge: ["bg-success-base text-foreground-strong"],
+        group: [
+          "-space-x-1.5",
+          "*:data-[slot=avatar]:outline *:data-[slot=avatar]:outline-2 *:data-[slot=avatar]:outline-primary-50",
+          "*:data-[slot=avatar-group-count]:outline *:data-[slot=avatar-group-count]:outline-2 *:data-[slot=avatar-group-count]:outline-primary-50",
+        ],
+      },
+      elegant: {
+        root: ["bg-layer-muted"],
+        image: ["rounded-full"],
+        fallback: [
+          "overflow-hidden bg-layer-muted text-foreground-placeholder/70 text-sm",
+          "rounded-full",
+          "group-data-[size=xs]/avatar:text-xs",
+          "group-data-[size=2xs]/avatar:text-[10px]",
+        ],
+        badge: [
+          "translate-x-0 translate-y-0 bg-success-base text-foreground-inverse",
+          "right-0.5 bottom-0.5",
+          "group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1",
+          "group-data-[size=lg]/avatar:right-0.75 group-data-[size=lg]/avatar:bottom-0.75",
+        ],
+        group: [
+          "-space-x-2",
+          "*:data-[slot=avatar]:outline *:data-[slot=avatar]:outline-2 *:data-[slot=avatar]:outline-background",
+          "*:data-[slot=avatar-group-count]:outline *:data-[slot=avatar-group-count]:outline-2 *:data-[slot=avatar-group-count]:outline-background",
+        ],
+      },
+    },
+    type: {
+      agent: {},
+      human: {},
+    },
+    size: {
+      xl: { root: "size-16" },
+      lg: { root: "size-12" },
+      md: { root: "size-9" },
+      sm: { root: "size-8" },
+      xs: { root: "size-5" },
+      "2xs": { root: "size-[14px]" },
+    },
+  },
+  compoundVariants: [
+    {
+      theme: "brutal",
+      size: ["xl", "lg", "md", "sm"],
+      class: { root: "border-2" },
+    },
+    {
+      theme: "brutal",
+      size: ["xs", "2xs"],
+      class: { root: "border" },
+    },
+    {
+      theme: "brutal",
+      type: "agent",
+      class: { root: "bg-info-base" },
+    },
+    {
+      theme: "brutal",
+      type: "human",
+      class: { root: "bg-brutal-purple text-foreground-strong" },
+    },
+    {
+      theme: "elegant",
+      size: "xl",
+      class: {
+        root: "rounded-full",
+      },
+    },
+    {
+      theme: "elegant",
+      size: "lg",
+      class: {
+        root: "rounded-full",
+      },
+    },
+    {
+      theme: "elegant",
+      size: ["md", "sm"],
+      class: {
+        root: "rounded-full",
+      },
+    },
+    {
+      theme: "elegant",
+      size: "xs",
+      class: {
+        root: "rounded-full",
+      },
+    },
+    {
+      theme: "elegant",
+      size: "2xs",
+      class: {
+        root: "rounded-full",
+      },
+    },
+    {
+      theme: "elegant",
+      type: "agent",
+      class: { root: "text-foreground-muted" },
+    },
+    {
+      theme: "elegant",
+      type: "human",
+      class: { root: "text-foreground-muted" },
+    },
+  ],
+});
+
+export type AvatarSize = NonNullable<VariantProps<typeof avatar>["size"]>;
+
+export type AvatarProps = StyledProps<AvatarPrimitive.Root.Props> &
+  Required<Pick<VariantProps<typeof avatar>, "size" | "type">>;
+
+export function Avatar({ size, type, className, children, ...props }: AvatarProps) {
+  const theme = useThemeFamily();
+  const { root } = avatar({ theme, type, size });
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={root({ className })}
+      {...props}
+    >
+      {children ?? <AvatarFallback />}
+    </AvatarPrimitive.Root>
+  );
+}
+
+export type AvatarImageProps = StyledProps<AvatarPrimitive.Image.Props>;
+
+// Managed avatar image. Base UI tracks its load state and hides it (revealing the
+// fallback) while loading or on error. Fills the frame edge-to-edge.
+export function AvatarImage({ className, ...props }: AvatarImageProps) {
+  const theme = useThemeFamily();
+  const { image } = avatar({ theme });
+  return (
+    <AvatarPrimitive.Image data-slot="avatar-image" className={image({ className })} {...props} />
+  );
+}
+
+export type AvatarFallbackProps = StyledProps<AvatarPrimitive.Fallback.Props>;
+
+function AvatarFallbackIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <g
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1"
+        stroke="currentColor"
+      >
+        <circle cx="9" cy="7.75" r="2" />
+        <path d="M9,16.25c1.407,0,2.716-.407,3.827-1.101-.481-1.67-2.003-2.899-3.827-2.899s-3.347,1.229-3.827,2.899c1.112,.694,2.42,1.101,3.827,1.101Z" />
+        <circle
+          cx="1.889"
+          cy="10.414"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="2.971"
+          cy="4.972"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="2.972"
+          cy="13.027"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle cx="1.89" cy="7.586" r=".75" fill="currentColor" data-stroke="none" stroke="none" />
+        <circle
+          cx="4.973"
+          cy="2.972"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="7.586"
+          cy="1.889"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="15.029"
+          cy="13.028"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="16.111"
+          cy="7.586"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="13.028"
+          cy="2.971"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="16.11"
+          cy="10.414"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="15.028"
+          cy="4.973"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+        <circle
+          cx="10.414"
+          cy="1.89"
+          r=".75"
+          fill="currentColor"
+          data-stroke="none"
+          stroke="none"
+        />
+      </g>
+    </svg>
+  );
+}
+
+// Shown when no AvatarImage has loaded. With no children it renders the
+// placeholder user icon, auto-scaled via the parent's `data-size` hook.
+export function AvatarFallback({ className, children, ...props }: AvatarFallbackProps) {
+  const theme = useThemeFamily();
+  const { fallback } = avatar({ theme });
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={fallback({ className })}
+      {...props}
+    >
+      {children ?? <AvatarFallbackIcon />}
+    </AvatarPrimitive.Fallback>
+  );
+}
+
+export type AvatarBadgeProps = ComponentPropsWithRef<"span">;
+
+// Presence/status badge overlaid in the avatar's bottom-right corner. The root
+// stays overflow-visible so the badge can sit on the frame edge. Default fill is
+// lime; override with a `bg-*` class via className. Optionally wraps a small icon.
+export function AvatarBadge({ className, ...props }: AvatarBadgeProps) {
+  const theme = useThemeFamily();
+  const { badge } = avatar({ theme });
+  return <span data-slot="avatar-badge" className={badge({ className })} {...props} />;
+}
+
+export type AvatarGroupProps = ComponentPropsWithRef<"div">;
+
+// Overlapping stack of avatars (and an optional trailing AvatarGroupCount). The
+// ring color follows the active theme's surface assumptions.
+export function AvatarGroup({ className, ...props }: AvatarGroupProps) {
+  const theme = useThemeFamily();
+  const { group } = avatar({ theme });
+  return <div data-slot="avatar-group" className={group({ className })} {...props} />;
+}
+
+export type AvatarGroupCountProps = ComponentPropsWithRef<"span"> & {
+  /** Matches the frame scale of the sibling avatars. */
+  size: AvatarSize;
+};
+
+// Trailing "+N" overflow chip for an AvatarGroup. Reuses the Avatar frame but
+// omits `type`, swapping the role fill for a neutral count chip.
+export function AvatarGroupCount({ size, className, ...props }: AvatarGroupCountProps) {
+  const theme = useThemeFamily();
+  const { root } = avatar({ theme, size });
+  const countClassName =
+    theme === "elegant"
+      ? "bg-layer-muted font-medium text-xs leading-none tabular-nums text-foreground-muted"
+      : "bg-secondary-400 font-bold text-xs leading-none tabular-nums text-foreground-strong";
+  return (
+    <span
+      data-slot="avatar-group-count"
+      className={root({
+        class: [countClassName, className],
+      })}
+      {...props}
+    />
+  );
+}

package/src/components/avatar/index.ts

@@ -0,0 +1,17 @@
+export {
+  Avatar,
+  type AvatarSize,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+} from "./avatar.tsx";
+export type {
+  AvatarProps,
+  AvatarImageProps,
+  AvatarFallbackProps,
+  AvatarBadgeProps,
+  AvatarGroupProps,
+  AvatarGroupCountProps,
+} from "./avatar.tsx";