@raggle-ai/scout-ui 0.1.0

package/README.md

@@ -0,0 +1,20 @@
+# @raggle-ai/scout-ui
+
+Reusable React project search components for Raggle Scout consumers.
+
+```tsx
+import { ProjectSearchList } from "@raggle-ai/scout-ui";
+import "@raggle-ai/scout-ui/styles.css";
+
+<ProjectSearchList projects={projects} onSelect={setProject} />;
+```
+
+## Publishing
+
+The package publishes from `.github/workflows/publish.yml` on every push to `main` and from manual workflow dispatch.
+
+The workflow validates the package on GitHub-hosted Actions, checks the tarball with `npm pack --dry-run`, and publishes only when the current package version does not already exist on npm.
+
+Configure npm trusted publishing for package `@raggle-ai/scout-ui` with GitHub organization `raggle-ai`, repository `scout-ui`, and workflow filename `publish.yml`.
+
+npm trusted publishing supports GitHub-hosted runners. The publish job uses `ubuntu-latest` instead of Blacksmith so npm can verify the OIDC token.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ProjectSearchList } from "./project-search-list.js";
+export type { ProjectSearchItem, ProjectSearchListProps, } from "./project-search-list.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EACV,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { ProjectSearchList } from "./project-search-list.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/project-search-list.d.ts

@@ -0,0 +1,21 @@
+export interface ProjectSearchItem {
+    id: string;
+    name: string;
+    worktree: string;
+    parentFolders?: string;
+    repositoryLabel?: string;
+    iconUrl?: string;
+    currentBranch?: string;
+}
+export interface ProjectSearchListProps<Project extends ProjectSearchItem> {
+    projects: readonly Project[];
+    selectedProjectId?: string | null;
+    onSelect(project: Project): void;
+    placeholder?: string;
+    emptyMessage?: string;
+    ariaLabel?: string;
+    autoFocus?: boolean;
+    maxResults?: number;
+}
+export declare function ProjectSearchList<Project extends ProjectSearchItem>({ projects, selectedProjectId, onSelect, placeholder, emptyMessage, ariaLabel, autoFocus, maxResults, }: ProjectSearchListProps<Project>): import("react").JSX.Element;
+//# sourceMappingURL=project-search-list.d.ts.map

package/dist/project-search-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-search-list.d.ts","sourceRoot":"","sources":["../src/project-search-list.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB,CAAC,OAAO,SAAS,iBAAiB;IACvE,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,EAAE,EACnE,QAAQ,EACR,iBAAwB,EACxB,QAAQ,EACR,WAAkC,EAClC,YAAmC,EACnC,SAA6B,EAC7B,SAAgB,EAChB,UAAqC,GACtC,EAAE,sBAAsB,CAAC,OAAO,CAAC,+BAiHjC"}

package/dist/project-search-list.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+export function ProjectSearchList({ projects, selectedProjectId = null, onSelect, placeholder = "Search projects...", emptyMessage = "No projects found.", ariaLabel = "Search projects", autoFocus = true, maxResults = Number.POSITIVE_INFINITY, }) {
+    const [search, setSearch] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const listRef = useRef(null);
+    const normalizedSearch = search.trim().toLowerCase();
+    const filtered = useMemo(() => projects.filter((project) => !normalizedSearch ||
+        project.name.toLowerCase().includes(normalizedSearch) ||
+        project.worktree.toLowerCase().includes(normalizedSearch)), [normalizedSearch, projects]);
+    const visible = useMemo(() => filtered.slice(0, maxResults), [filtered, maxResults]);
+    useEffect(() => setActiveIndex(0), [search]);
+    const selectActiveProject = useCallback(() => {
+        const project = visible[Math.max(0, Math.min(activeIndex, visible.length - 1))];
+        if (project)
+            onSelect(project);
+    }, [activeIndex, onSelect, visible]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex((previous) => Math.min(previous + 1, Math.max(0, visible.length - 1)));
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex((previous) => Math.max(previous - 1, 0));
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            selectActiveProject();
+        }
+    }, [selectActiveProject, visible.length]);
+    useEffect(() => {
+        const activeElement = listRef.current?.querySelector('[data-active="true"]');
+        activeElement?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex]);
+    return (_jsx("div", { className: "scout-project-search", onKeyDown: handleKeyDown, children: _jsxs("ul", { ref: listRef, className: "scout-project-list", role: "listbox", "aria-label": ariaLabel, children: [_jsx("li", { className: "scout-project-search-row", children: _jsx("input", { className: "scout-project-search-input", placeholder: placeholder, value: search, onChange: (event) => setSearch(event.target.value), autoFocus: autoFocus }) }), filtered.length === 0 && (_jsx("li", { className: "scout-project-empty", children: emptyMessage })), visible.map((project, index) => (_jsx("li", { role: "option", "aria-selected": selectedProjectId === project.id, children: _jsxs("button", { type: "button", className: `scout-project-option${selectedProjectId === project.id ? " is-selected" : ""}${index === activeIndex ? " is-active" : ""}`, "data-active": index === activeIndex, onClick: () => onSelect(project), children: [_jsxs("span", { className: "scout-project-option-left", children: [project.iconUrl && (_jsx("img", { className: "scout-project-option-icon", src: project.iconUrl, alt: "" })), _jsxs("span", { className: "scout-project-option-title", children: [_jsx("span", { className: "scout-project-option-name", children: project.name }), project.parentFolders && (_jsx("span", { className: "scout-project-option-subtitle", children: project.parentFolders }))] })] }), _jsx("span", { className: "scout-project-option-repository", children: project.repositoryLabel ?? project.currentBranch ?? "" })] }) }, project.id)))] }) }));
+}
+//# sourceMappingURL=project-search-list.js.map

package/dist/project-search-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-search-list.js","sourceRoot":"","sources":["../src/project-search-list.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@raggle-ai/scout-ui",
+  "version": "0.1.0",
+  "description": "Reusable React project search components for Raggle Scout",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/raggle-ai/scout-ui.git"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src/styles.css",
+    "README.md"
+  ],
+  "scripts": {
+    "prebuild": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "tsc -p tsconfig.json",
+    "prepack": "npm run build",
+    "publish:ci": "node scripts/publish-ci.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "prettier --check \"src/**/*.{ts,tsx,css}\"",
+    "fix-lint": "prettier --write \"src/**/*.{ts,tsx,css}\""
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.10",
+    "prettier": "^3.9.6",
+    "react": "^19.0.0",
+    "typescript": "^5.8.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/styles.css

@@ -0,0 +1,140 @@
+.scout-project-search {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--scout-project-shell, #fff);
+  color: var(--scout-project-text, #17181c);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    sans-serif;
+  font-size: 14px;
+}
+
+.scout-project-search *,
+.scout-project-search *::before,
+.scout-project-search *::after {
+  box-sizing: border-box;
+}
+
+.scout-project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.scout-project-search-row {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 8px 8px 4px;
+  background: var(--scout-project-shell, #fff);
+}
+
+.scout-project-search-input {
+  width: 100%;
+  border: 1px solid var(--scout-project-border, #e4e6ea);
+  border-radius: 8px;
+  background: var(--scout-project-field, #f3f4f6);
+  color: var(--scout-project-text, #17181c);
+  padding: 6px 8px;
+  font: inherit;
+  font-size: 12px;
+}
+
+.scout-project-search-input:focus {
+  border-color: var(--scout-project-accent, #3565e0);
+  outline: none;
+}
+
+.scout-project-option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  min-height: 40px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  padding: 6px 8px;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.scout-project-option:hover,
+.scout-project-option.is-active {
+  background: var(--scout-project-active, #d8d8d9);
+}
+
+.scout-project-option.is-selected {
+  color: var(--scout-project-accent, #3565e0);
+}
+
+.scout-project-option-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.scout-project-option-icon {
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.scout-project-option-title {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
+
+.scout-project-option-name,
+.scout-project-option-subtitle,
+.scout-project-option-repository {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scout-project-option-name {
+  min-width: 0;
+  color: var(--scout-project-name, #111318);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.scout-project-option-subtitle {
+  min-width: 0;
+  color: var(--scout-project-muted, #737883);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.scout-project-option-repository {
+  max-width: 220px;
+  color: var(--scout-project-repository, #626873);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: right;
+}
+
+.scout-project-empty {
+  padding: 8px;
+  color: var(--scout-project-muted, #737883);
+  font-size: 12px;
+}