@echothink-ui/project 0.1.0

package/dist/utils.d.ts

@@ -0,0 +1,288 @@
+import type { EthOperationalStatus, EthSeverity } from "@echothink-ui/core";
+import type { ProjectHealthStatus, ProjectBaseProps, ProjectPermissionEntity, ProjectStatusSummaryData, ProjectSummary } from "./types";
+export declare function classNames(...values: Array<string | false | null | undefined>): string;
+export declare function healthToStatus(health?: ProjectHealthStatus): EthOperationalStatus;
+export declare function healthLabel(health?: ProjectHealthStatus): "Critical" | "Warning" | "Healthy";
+export declare function statusToSeverity(status: EthOperationalStatus): EthSeverity;
+export declare function summarizeProjects(projects: ProjectSummary[]): ProjectStatusSummaryData;
+export declare function entityId(entity: ProjectPermissionEntity): string;
+export declare function entityLabel(entity: ProjectPermissionEntity): import("react").ReactNode;
+export declare function permissionKey(subject: ProjectPermissionEntity, resource: ProjectPermissionEntity, action: ProjectPermissionEntity): string;
+export declare function formatNumber(value: number | undefined): string;
+export declare function projectHtmlProps(props: ProjectBaseProps): {
+    id?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    role?: import("react").AriaRole | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    className?: string | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@echothink-ui/project",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
+  },
+  "dependencies": {
+    "@echothink-ui/core": "0.2.0",
+    "@echothink-ui/data": "0.2.0",
+    "@echothink-ui/icons": "0.2.0",
+    "@echothink-ui/charts": "0.2.0",
+    "@echothink-ui/layouts": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --sourcemap --clean --external react --external react-dom && tsc -p tsconfig.json --declaration --emitDeclarationOnly --noEmit false --outDir dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config ../../vitest.config.ts --passWithNoTests",
+    "lint": "eslint src"
+  }
+}

package/src/components/ProjectActivityTimeline.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ProjectActivityTimeline } from "./ProjectActivityTimeline";
+
+describe("@echothink-ui/project ProjectActivityTimeline", () => {
+  it("renders project events with semantic time values and kind tone classes", () => {
+    render(
+      <ProjectActivityTimeline
+        events={[
+          {
+            id: "approval",
+            timestamp: "2026-05-27 10:42",
+            actor: "JD",
+            kind: "approval",
+            summary: "Approved Wave Q3",
+            details: "Marked the collection wave ready for release."
+          },
+          {
+            id: "risk",
+            timestamp: "09:14",
+            actor: "Agent",
+            kind: "blocked",
+            summary: "Flagged missing transcript evidence"
+          }
+        ]}
+      />
+    );
+
+    expect(screen.getByRole("region", { name: "Activity" })).toBeTruthy();
+    expect(screen.getByRole("list")).toBeTruthy();
+    expect(screen.getByText("Approved Wave Q3")).toBeTruthy();
+    expect(screen.getByText("Marked the collection wave ready for release.")).toBeTruthy();
+    expect(screen.getByText("By JD")).toBeTruthy();
+    expect(screen.getByText("10:42").getAttribute("datetime")).toBe("2026-05-27T10:42");
+    expect(screen.getByText("09:14").getAttribute("datetime")).toBe("09:14");
+    expect(screen.getByText("approval").closest("li")?.className).toContain(
+      "eth-project-activity-timeline__item--success"
+    );
+    expect(screen.getByText("blocked").closest("li")?.className).toContain(
+      "eth-project-activity-timeline__item--danger"
+    );
+  });
+});

package/src/components/ProjectActivityTimeline.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { Badge, EmptyState, type EthSeverity } from "@echothink-ui/core";
+import type { ProjectActivityEvent, ProjectBaseProps } from "../types";
+import { classNames, projectHtmlProps } from "../utils";
+
+export interface ProjectActivityTimelineProps extends ProjectBaseProps {
+  events?: ProjectActivityEvent[];
+}
+
+function getActivityKindTone(kind: string): EthSeverity {
+  const normalized = kind.toLowerCase();
+
+  if (/(approve|approved|approval|complete|completed|success|release)/.test(normalized)) {
+    return "success";
+  }
+
+  if (/(block|blocked|fail|failed|error|reject|rejected|risk)/.test(normalized)) {
+    return "danger";
+  }
+
+  if (/(pending|review|warning|needs|wait)/.test(normalized)) {
+    return "warning";
+  }
+
+  if (/(draft|resource|domain|config|sync|agent|update)/.test(normalized)) {
+    return "info";
+  }
+
+  return "neutral";
+}
+
+function getActivityTime(timestamp: string) {
+  const value = timestamp.trim();
+  const dateTimeMatch = value.match(
+    /^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2})(?::\d{2}(?:\.\d{1,3})?)?(?:Z|[+-]\d{2}:?\d{2})?$/
+  );
+
+  if (dateTimeMatch) {
+    return {
+      dateTime: `${dateTimeMatch[1]}T${dateTimeMatch[2]}`,
+      label: dateTimeMatch[2]
+    };
+  }
+
+  if (/^\d{2}:\d{2}(?::\d{2})?$/.test(value) || /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return { dateTime: value, label: value };
+  }
+
+  return { dateTime: undefined, label: value };
+}
+
+export function ProjectActivityTimeline({
+  events = [],
+  className,
+  title = "Activity",
+  ...props
+}: ProjectActivityTimelineProps) {
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-activity-timeline", className)}
+      data-eth-component="ProjectActivityTimeline"
+      role="region"
+      aria-label={typeof title === "string" ? title : "Project activity"}
+      tabIndex={-1}
+    >
+      {title ? (
+        <header className="eth-project-activity-timeline__header">
+          <h3>{title}</h3>
+        </header>
+      ) : null}
+      {events.length ? (
+        <ol className="eth-project-activity-timeline__list">
+          {events.map((event) => {
+            const tone = getActivityKindTone(event.kind);
+            const time = getActivityTime(event.timestamp);
+
+            return (
+              <li
+                key={event.id}
+                className={classNames(
+                  "eth-project-activity-timeline__item",
+                  `eth-project-activity-timeline__item--${tone}`
+                )}
+                data-kind={event.kind}
+              >
+                <time className="eth-project-activity-timeline__time" dateTime={time.dateTime}>
+                  {time.label}
+                </time>
+                <div className="eth-project-activity-timeline__rail" aria-hidden>
+                  <span className="eth-project-activity-timeline__marker" />
+                </div>
+                <article className="eth-project-activity-timeline__event">
+                  <header className="eth-project-activity-timeline__event-header">
+                    <Badge severity={tone}>{event.kind}</Badge>
+                    {event.actor ? (
+                      <span className="eth-project-activity-timeline__actor">
+                        By {event.actor}
+                      </span>
+                    ) : null}
+                  </header>
+                  <strong className="eth-project-activity-timeline__summary">
+                    {event.summary}
+                  </strong>
+                  {event.details ? (
+                    <p className="eth-project-activity-timeline__details">{event.details}</p>
+                  ) : null}
+                </article>
+              </li>
+            );
+          })}
+        </ol>
+      ) : (
+        <EmptyState title="No activity" description="Project changes and events appear here." />
+      )}
+    </section>
+  );
+}

package/src/components/ProjectAppDomainPanel.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { EmptyState, StatusDot, statusLabel, type EthAction } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { ProjectAppDomainInstance, ProjectBaseProps } from "../types";
+import {
+  classNames,
+  formatNumber,
+  healthLabel,
+  healthToStatus,
+  projectHtmlProps
+} from "../utils";
+
+const attentionStatuses = new Set(["blocked", "failed", "stale", "warning", "approval-required"]);
+
+export interface ProjectAppDomainPanelProps extends ProjectBaseProps {
+  instances?: ProjectAppDomainInstance[];
+  onOpen?: (instanceId: string) => void;
+  onConfigure?: (instanceId: string) => void;
+  onRemove?: (instanceId: string) => void;
+}
+
+export function ProjectAppDomainPanel({
+  instances = [],
+  onOpen,
+  onConfigure,
+  onRemove,
+  className,
+  title = "App domains",
+  ...props
+}: ProjectAppDomainPanelProps) {
+  const runningCount = instances.filter((instance) => instance.status === "running").length;
+  const attentionCount = instances.filter(
+    (instance) =>
+      instance.health === "warning" ||
+      instance.health === "critical" ||
+      attentionStatuses.has(instance.status)
+  ).length;
+  const hasRowActions = Boolean(onOpen || onConfigure || onRemove);
+
+  const columns = React.useMemo<DataColumn<ProjectAppDomainInstance>[]>(
+    () => [
+      {
+        key: "appDomainLabel",
+        header: "App domain",
+        width: "42%",
+        render: (instance) => (
+          <div className="eth-project-app-domain-panel__domain">
+            <strong>{instance.appDomainLabel}</strong>
+            <span>{instance.id}</span>
+          </div>
+        )
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "18%",
+        render: (instance) => (
+          <StatusDot status={instance.status} label={statusLabel(instance.status)} />
+        )
+      },
+      {
+        key: "health",
+        header: "Health",
+        width: "18%",
+        render: (instance) => (
+          <StatusDot status={healthToStatus(instance.health)} label={healthLabel(instance.health)} />
+        )
+      }
+    ],
+    []
+  );
+
+  const rowActions = React.useCallback(
+    (instance: ProjectAppDomainInstance): EthAction[] => {
+      const actions: EthAction[] = [];
+      if (onOpen) {
+        actions.push({
+          id: "open",
+          label: "Open",
+          onSelect: () => onOpen(instance.id)
+        });
+      }
+      if (onConfigure) {
+        actions.push({
+          id: "configure",
+          label: "Configure",
+          onSelect: () => onConfigure(instance.id)
+        });
+      }
+      if (onRemove) {
+        actions.push({
+          id: "remove",
+          label: "Remove",
+          intent: "danger",
+          onSelect: () => onRemove(instance.id)
+        });
+      }
+      return actions;
+    },
+    [onConfigure, onOpen, onRemove]
+  );
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-app-domain-panel", className)}
+      data-eth-component="ProjectAppDomainPanel"
+      role="region"
+      aria-label={typeof title === "string" ? title : "Project app domains"}
+      tabIndex={-1}
+    >
+      {title ? (
+        <header className="eth-project-app-domain-panel__header">
+          <h3>{title}</h3>
+          <dl className="eth-project-app-domain-panel__summary" aria-label="App domain summary">
+            <div>
+              <dt>Installed</dt>
+              <dd>{formatNumber(instances.length)}</dd>
+            </div>
+            <div>
+              <dt>Running</dt>
+              <dd>{formatNumber(runningCount)}</dd>
+            </div>
+            <div>
+              <dt>Attention</dt>
+              <dd>{formatNumber(attentionCount)}</dd>
+            </div>
+          </dl>
+        </header>
+      ) : null}
+      <DataTable
+        rows={instances}
+        columns={columns}
+        rowKey="id"
+        density="compact"
+        className="eth-project-app-domain-panel__table"
+        rowActions={hasRowActions ? rowActions : undefined}
+        emptyState={
+          <EmptyState
+            title="No app domains"
+            description="Installed and running project app domains appear here."
+          />
+        }
+      />
+    </section>
+  );
+}