@dowel-ui/react 0.5.0 → 0.7.0

package/src/blocks/admin-users/admin-users.tsx

@@ -1,251 +0,0 @@
-"use client";
-
-import {
-  columnVisibilityFeature,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  rowPaginationFeature,
-  rowSortingFeature,
-  tableFeatures,
-  useTable,
-} from "@tanstack/react-table";
-import { useMemo, useState } from "react";
-
-import { Avatar, AvatarFallback } from "@/components/avatar";
-import { Badge } from "@/components/badge";
-import { Button } from "@/components/button";
-import {
-  DataTable,
-  DataTableColumnHeader,
-  DataTablePagination,
-  DataTableViewOptions,
-} from "@/components/data-table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/dropdown-menu";
-import { EmptyState, EmptyStateDescription, EmptyStateTitle } from "@/components/empty-state";
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-import { cn } from "@/lib/utils";
-
-/**
- * A user administration table.
- *
- * The filter is the part worth reading. Results change as you type, which for
- * a screen reader user is a change they never asked for and cannot see — so the
- * row count is announced politely, and the search input is a labelled control
- * rather than a placeholder-only box.
- */
-
-export interface AdminUser {
-  id: string;
-  name: string;
-  email: string;
-  role: "Owner" | "Admin" | "Member" | "Viewer";
-  status: "Active" | "Invited" | "Suspended";
-  lastActive: string;
-}
-
-export interface AdminUsersBlockProps {
-  users: AdminUser[];
-  onInvite?: () => void;
-  onEdit?: (user: AdminUser) => void;
-  onRemove?: (user: AdminUser) => void;
-  className?: string;
-}
-
-const features = tableFeatures({
-  rowSortingFeature,
-  rowPaginationFeature,
-  columnVisibilityFeature,
-  sortedRowModel: createSortedRowModel(),
-  paginatedRowModel: createPaginatedRowModel(),
-});
-
-function initials(name: string): string {
-  return name
-    .split(" ")
-    .map((part) => part[0] ?? "")
-    .slice(0, 2)
-    .join("")
-    .toUpperCase();
-}
-
-export function AdminUsersBlock({
-  users,
-  onInvite,
-  onEdit,
-  onRemove,
-  className,
-}: AdminUsersBlockProps) {
-  const [query, setQuery] = useState("");
-
-  // Filtered here rather than through the table's filtering feature, so the
-  // block stays usable without wiring that feature up.
-  const filtered = useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    if (!needle) return users;
-    return users.filter(
-      (user) =>
-        user.name.toLowerCase().includes(needle) || user.email.toLowerCase().includes(needle),
-    );
-  }, [users, query]);
-
-  const table = useTable({
-    features,
-    data: filtered,
-    initialState: { pagination: { pageIndex: 0, pageSize: 10 } },
-    columns: [
-      {
-        accessorKey: "name",
-        header: ({ column }) => <DataTableColumnHeader column={column} title="User" />,
-        cell: ({ row }) => (
-          <div className="flex items-center gap-3">
-            <Avatar size="sm">
-              <AvatarFallback>{initials(row.original.name)}</AvatarFallback>
-            </Avatar>
-            <div className="min-w-0">
-              <p className="truncate text-sm font-medium">{row.original.name}</p>
-              <p className="truncate text-xs text-muted-foreground">{row.original.email}</p>
-            </div>
-          </div>
-        ),
-      },
-      {
-        accessorKey: "role",
-        header: ({ column }) => <DataTableColumnHeader column={column} title="Role" />,
-      },
-      {
-        accessorKey: "status",
-        header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
-        cell: ({ row }) => (
-          <Badge
-            size="sm"
-            variant={
-              row.original.status === "Active"
-                ? "success"
-                : row.original.status === "Suspended"
-                  ? "destructive"
-                  : "secondary"
-            }
-          >
-            {row.original.status}
-          </Badge>
-        ),
-      },
-      {
-        accessorKey: "lastActive",
-        header: ({ column }) => <DataTableColumnHeader column={column} title="Last active" />,
-        cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">{row.original.lastActive}</span>
-        ),
-      },
-      {
-        id: "actions",
-        // Not an empty header: a th with no text is a column a screen reader
-        // cannot name. Hidden visually, present in the table semantics.
-        header: () => <span className="sr-only">Actions</span>,
-        enableSorting: false,
-        cell: ({ row }) => (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                // Named per row: four identical "Actions" buttons tell a screen
-                // reader user nothing about which row they are on.
-                aria-label={`Actions for ${row.original.name}`}
-              >
-                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                  <circle cx="12" cy="5" r="1.5" fill="currentColor" />
-                  <circle cx="12" cy="12" r="1.5" fill="currentColor" />
-                  <circle cx="12" cy="19" r="1.5" fill="currentColor" />
-                </svg>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>{row.original.name}</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onSelect={() => {
-                  onEdit?.(row.original);
-                }}
-              >
-                Edit member
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                variant="destructive"
-                onSelect={() => {
-                  onRemove?.(row.original);
-                }}
-              >
-                Remove from team
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ),
-      },
-    ],
-  });
-
-  return (
-    <div className={cn("flex flex-col gap-4", className)}>
-      <div className="flex flex-wrap items-end justify-between gap-3">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight">Team members</h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {users.length} {users.length === 1 ? "person" : "people"} in this workspace.
-          </p>
-        </div>
-        <Button onClick={onInvite}>Invite people</Button>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-2">
-        <div className="grid flex-1 gap-1.5 sm:max-w-xs">
-          {/* A real label, not a placeholder: placeholders vanish as soon as
-              anyone types, taking the field's name with them. */}
-          <Label htmlFor="user-filter" className="sr-only">
-            Filter by name or email
-          </Label>
-          <Input
-            id="user-filter"
-            inputSize="sm"
-            type="search"
-            placeholder="Filter by name or email…"
-            value={query}
-            onChange={(event) => {
-              setQuery(event.target.value);
-            }}
-          />
-        </div>
-        <DataTableViewOptions table={table} />
-      </div>
-
-      {/* Filtering changes the results without the user asking, so the count is
-          announced. Polite, so it waits for a pause in typing. */}
-      <p aria-live="polite" className="sr-only">
-        {filtered.length} {filtered.length === 1 ? "person" : "people"} match the filter.
-      </p>
-
-      <DataTable
-        table={table}
-        aria-label="Team members"
-        empty={
-          <EmptyState size="sm">
-            <EmptyStateTitle>No one matches “{query}”</EmptyStateTitle>
-            <EmptyStateDescription>
-              Try a different name or email address.
-            </EmptyStateDescription>
-          </EmptyState>
-        }
-      />
-
-      <DataTablePagination table={table} pageSizes={[10, 25, 50]} />
-    </div>
-  );
-}

package/src/blocks/admin-users/index.ts

@@ -1 +0,0 @@
-export { AdminUsersBlock, type AdminUser, type AdminUsersBlockProps } from "./admin-users";

package/src/blocks/admin-users/meta.ts

@@ -1,27 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "admin-users",
-  kind: "block",
-  title: "Admin — users",
-  description: "A team administration table with filtering, sorting and per-row actions.",
-  category: "data",
-  status: "stable",
-  dependencies: ["@tanstack/react-table"],
-  registryDependencies: [
-    "avatar",
-    "badge",
-    "button",
-    "data-table",
-    "dropdown-menu",
-    "empty-state",
-    "input",
-    "label",
-  ],
-  files: ["admin-users.tsx"],
-  a11y:
-    "Filtering changes the results without the user asking, so the matching count is announced " +
-    "politely. The filter has a real label rather than only a placeholder, which disappears the " +
-    "moment anyone types. Each row's action button is named after its row — four identical " +
-    '"Actions" buttons say nothing about which row you are on.',
-});

package/src/blocks/ai-chat/ai-chat.tsx

@@ -1,280 +0,0 @@
-"use client";
-
-import { useState, type FormEvent, type ReactNode } from "react";
-
-import {
-  Conversation,
-  ConversationMessages,
-  ConversationScrollButton,
-  ConversationStatus,
-} from "@/components/ai-conversation";
-import {
-  Message,
-  MessageActions,
-  MessageAvatar,
-  MessageBody,
-  MessageFooter,
-} from "@/components/ai-message";
-import { ModelSelector, type ModelOption } from "@/components/ai-model-selector";
-import {
-  PromptInput,
-  PromptInputSubmit,
-  PromptInputTextarea,
-  PromptInputToolbar,
-} from "@/components/ai-prompt-input";
-import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-reasoning";
-import { Response, ThinkingIndicator } from "@/components/ai-response";
-import { Source, Sources, SourcesContent, SourcesTrigger } from "@/components/ai-sources";
-import { TokenCount } from "@/components/ai-token-usage";
-import {
-  Tool,
-  ToolContent,
-  ToolHeader,
-  ToolPayload,
-  ToolSection,
-  type ToolStatus,
-} from "@/components/ai-tool";
-import { Button } from "@/components/button";
-import { EmptyState, EmptyStateDescription, EmptyStateTitle } from "@/components/empty-state";
-import { cn } from "@/lib/utils";
-
-/**
- * A complete chat surface.
- *
- * Assembled from the AI components rather than reimplementing any of them, so
- * every decision they encode still holds here: the transcript is a list and not
- * a live region, state is announced separately, and the composer will not send
- * mid-IME-composition.
- */
-
-export interface ChatToolCall {
-  id: string;
-  name: string;
-  status: ToolStatus;
-  arguments?: string;
-  result?: string;
-}
-
-export interface ChatSource {
-  index: number;
-  title: string;
-  origin?: string;
-  href?: string;
-}
-
-export interface ChatMessage {
-  id: string;
-  from: "user" | "assistant";
-  content: string;
-  reasoning?: string;
-  tools?: ChatToolCall[];
-  sources?: ChatSource[];
-  tokens?: number;
-  /** Still arriving: shows the caret. */
-  streaming?: boolean;
-}
-
-export interface AiChatBlockProps {
-  messages: ChatMessage[];
-  onSend?: (message: string) => void;
-  onStop?: () => void;
-  /** A response is in flight. */
-  busy?: boolean;
-  /** Shown before the first token arrives. */
-  waiting?: boolean;
-  models?: ModelOption[];
-  model?: string;
-  onModelChange?: (model: string) => void;
-  /** Shown when the transcript is empty. */
-  empty?: ReactNode;
-  placeholder?: string;
-  className?: string;
-}
-
-export function AiChatBlock({
-  messages,
-  onSend,
-  onStop,
-  busy = false,
-  waiting = false,
-  models,
-  model,
-  onModelChange,
-  empty,
-  placeholder = "Ask anything…",
-  className,
-}: AiChatBlockProps) {
-  const [draft, setDraft] = useState("");
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const trimmed = draft.trim();
-    if (!trimmed) return;
-    onSend?.(trimmed);
-    setDraft("");
-  }
-
-  return (
-    <div className={cn("flex h-full min-h-0 flex-col", className)}>
-      <Conversation>
-        {messages.length === 0 ? (
-          <div className="grid h-full place-items-center p-8">
-            {empty ?? (
-              <EmptyState>
-                <EmptyStateTitle>Start a conversation</EmptyStateTitle>
-                <EmptyStateDescription>
-                  Ask a question, paste an error, or describe what you are trying to build.
-                </EmptyStateDescription>
-              </EmptyState>
-            )}
-          </div>
-        ) : (
-          <ConversationMessages>
-            {messages.map((message) => (
-              <Message key={message.id} from={message.from}>
-                {message.from === "assistant" ? <MessageAvatar>AI</MessageAvatar> : null}
-                <MessageBody from={message.from} className="min-w-0 flex-1">
-                  {message.reasoning ? (
-                    <Reasoning className="mb-2">
-                      <ReasoningTrigger streaming={message.streaming} />
-                      <ReasoningContent>{message.reasoning}</ReasoningContent>
-                    </Reasoning>
-                  ) : null}
-
-                  {message.tools?.map((tool) => (
-                    <Tool key={tool.id} status={tool.status} className="mb-2">
-                      <ToolHeader name={tool.name} status={tool.status} />
-                      <ToolContent>
-                        {tool.arguments ? (
-                          <ToolSection label="Arguments">
-                            <ToolPayload label={`${tool.name} arguments`}>
-                              {tool.arguments}
-                            </ToolPayload>
-                          </ToolSection>
-                        ) : null}
-                        {tool.result ? (
-                          <ToolSection label="Result">
-                            <ToolPayload label={`${tool.name} result`}>
-                              {tool.result}
-                            </ToolPayload>
-                          </ToolSection>
-                        ) : null}
-                      </ToolContent>
-                    </Tool>
-                  ))}
-
-                  {message.from === "assistant" ? (
-                    <Response streaming={message.streaming}>{message.content}</Response>
-                  ) : (
-                    message.content
-                  )}
-
-                  {message.sources && message.sources.length > 0 ? (
-                    <Sources className="mt-3">
-                      <SourcesTrigger count={message.sources.length} />
-                      <SourcesContent>
-                        {message.sources.map((source) => (
-                          <Source
-                            key={source.index}
-                            index={source.index}
-                            title={source.title}
-                            origin={source.origin}
-                            href={source.href ?? "#"}
-                          />
-                        ))}
-                      </SourcesContent>
-                    </Sources>
-                  ) : null}
-
-                  {message.from === "assistant" && !message.streaming ? (
-                    <>
-                      <MessageActions>
-                        <Button variant="ghost" size="icon-sm" aria-label="Copy response">
-                          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                            <rect
-                              x="9"
-                              y="9"
-                              width="12"
-                              height="12"
-                              rx="2"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            />
-                            <path
-                              d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                              strokeLinecap="round"
-                            />
-                          </svg>
-                        </Button>
-                        <Button variant="ghost" size="icon-sm" aria-label="Regenerate response">
-                          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                            <path
-                              d="M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
-                        </Button>
-                      </MessageActions>
-                      {message.tokens === undefined ? null : (
-                        <MessageFooter>
-                          <TokenCount value={message.tokens} />
-                        </MessageFooter>
-                      )}
-                    </>
-                  ) : null}
-                </MessageBody>
-              </Message>
-            ))}
-
-            {waiting ? (
-              <Message from="assistant">
-                <MessageAvatar>AI</MessageAvatar>
-                <MessageBody from="assistant">
-                  <ThinkingIndicator />
-                </MessageBody>
-              </Message>
-            ) : null}
-          </ConversationMessages>
-        )}
-
-        <ConversationScrollButton />
-      </Conversation>
-
-      {/* State, never content — the transcript above stays navigable at the
-          reader's own pace. */}
-      <ConversationStatus className="px-4 pb-1">
-        {waiting ? "Waiting for a response" : busy ? "Generating response" : ""}
-      </ConversationStatus>
-
-      <div className="border-t border-border p-4">
-        <PromptInput busy={busy} onSubmit={handleSubmit}>
-          <PromptInputTextarea
-            aria-label="Message"
-            placeholder={placeholder}
-            value={draft}
-            onChange={(event) => {
-              setDraft(event.target.value);
-            }}
-          />
-          <PromptInputToolbar>
-            {models && models.length > 0 ? (
-              <ModelSelector
-                aria-label="Model"
-                models={models}
-                value={model}
-                onValueChange={onModelChange}
-                triggerSize="sm"
-              />
-            ) : null}
-            <PromptInputSubmit onStop={onStop} />
-          </PromptInputToolbar>
-        </PromptInput>
-      </div>
-    </div>
-  );
-}

package/src/blocks/ai-chat/index.ts

@@ -1,7 +0,0 @@
-export {
-  AiChatBlock,
-  type AiChatBlockProps,
-  type ChatMessage,
-  type ChatSource,
-  type ChatToolCall,
-} from "./ai-chat";

package/src/blocks/ai-chat/meta.ts

@@ -1,32 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "ai-chat",
-  kind: "block",
-  title: "AI Chat",
-  description:
-    "A complete chat surface: transcript, reasoning, tool calls, sources and composer.",
-  category: "ai",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: [
-    "ai-conversation",
-    "ai-message",
-    "ai-model-selector",
-    "ai-prompt-input",
-    "ai-reasoning",
-    "ai-response",
-    "ai-sources",
-    "ai-token-usage",
-    "ai-tool",
-    "button",
-    "empty-state",
-  ],
-  files: ["ai-chat.tsx"],
-  a11y:
-    "Assembled from the AI components rather than reimplementing them, so their decisions still " +
-    "hold: the transcript is a list and not a live region, state is announced separately through " +
-    "ConversationStatus, and the composer will not send while an IME composition is active. Tool " +
-    "payloads are named per tool, so two open tool calls do not present two regions called " +
-    '"Result".',
-});