zidane-ui 9.0.4 → 9.1.3

package/dist/onboarding/index.d.ts

@@ -10,8 +10,10 @@ import { FeatureDemo, hasFeatureDemo } from "./demos/features.js";
 import { SceneProps } from "./demos/tour.js";
 import { TUTORIAL_SCENES } from "./demos/how-it-works.js";
 import "./demos/index.js";
-import { ExtensionMark, ExtensionMarkProps, NATIVE_EXTENSION_ICONS, ProviderMark, ProviderMarkProps } from "./marks.js";
+import { ExtensionMark, ExtensionMarkEntry, ExtensionMarkProps, NATIVE_EXTENSION_ICONS, ProviderMark, ProviderMarkProps, extensionMarkOf } from "./marks.js";
 import { GITHUB_SKILL_SOURCE_IMAGES, SkillSourceBrowser, SkillSourceBrowserProps } from "./skills/SkillSourceBrowser.js";
+import { SourceCard } from "./skills/parts.js";
+import { SourceBrowser, SourceBrowserProps, SourceBrowserRow, SourceBrowserWords, SourcePick } from "./sources/SourceBrowser.js";
 import { Tutorial, TutorialProps } from "./tutorials.js";
 import { SignInHandle, useSignIn } from "./useSignIn.js";
 import { AutonomyStep, AutonomyStepProps } from "./steps/AutonomyStep.js";
@@ -25,4 +27,4 @@ import { LookStep, LookStepProps } from "./steps/LookStep.js";
 import { ReadyStep, ReadyStepProps } from "./steps/ReadyStep.js";
 import { SkillsStep, SkillsStepProps } from "./steps/SkillsStep.js";
 import { WelcomeStep, WelcomeStepProps } from "./steps/WelcomeStep.js";
-export { ApprovalDemo, AutonomyStep, AutonomyStepProps, ConnectProviderCard, ConnectProviderCardProps, ConnectStep, ConnectStepProps, ConnectorsStep, ConnectorsStepProps, ConversationPresetPreview, ConversationPresetPreviewProps, ConversationPreview, ConversationPreviewProps, ConversationStep, ConversationStepProps, type DemoProps, DemoStage, ExtensionDemo, ExtensionMark, ExtensionMarkProps, ExtensionsStep, ExtensionsStepProps, FeatureDemo, FeaturesStep, FeaturesStepProps, GITHUB_SKILL_SOURCE_IMAGES, ImportStep, ImportStepProps, LookStep, LookStepProps, NATIVE_EXTENSION_ICONS, ONBOARDING_STEP_COMPONENTS, OnboardingFlow, OnboardingFlowProps, OnboardingHostProvider, OnboardingHostProviderProps, OnboardingProvider, OnboardingProviderProps, OnboardingRun, OnboardingStepFrame, OnboardingStepFrameProps, OnboardingStepNav, ProviderMark, ProviderMarkProps, ReadyStep, ReadyStepProps, SandboxDemo, type SceneProps, SignInHandle, SkillSourceBrowser, SkillSourceBrowserProps, SkillsStep, SkillsStepProps, TUTORIAL_SCENES, Tutorial, TutorialProps, WelcomeStep, WelcomeStepProps, hasFeatureDemo, transcriptPreviewOptions, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep, useSignIn };
+export { ApprovalDemo, AutonomyStep, AutonomyStepProps, ConnectProviderCard, ConnectProviderCardProps, ConnectStep, ConnectStepProps, ConnectorsStep, ConnectorsStepProps, ConversationPresetPreview, ConversationPresetPreviewProps, ConversationPreview, ConversationPreviewProps, ConversationStep, ConversationStepProps, type DemoProps, DemoStage, ExtensionDemo, ExtensionMark, ExtensionMarkEntry, ExtensionMarkProps, ExtensionsStep, ExtensionsStepProps, FeatureDemo, FeaturesStep, FeaturesStepProps, GITHUB_SKILL_SOURCE_IMAGES, ImportStep, ImportStepProps, LookStep, LookStepProps, NATIVE_EXTENSION_ICONS, ONBOARDING_STEP_COMPONENTS, OnboardingFlow, OnboardingFlowProps, OnboardingHostProvider, OnboardingHostProviderProps, OnboardingProvider, OnboardingProviderProps, OnboardingRun, OnboardingStepFrame, OnboardingStepFrameProps, OnboardingStepNav, ProviderMark, ProviderMarkProps, ReadyStep, ReadyStepProps, SandboxDemo, type SceneProps, SignInHandle, SkillSourceBrowser, SkillSourceBrowserProps, SkillsStep, SkillsStepProps, SourceBrowser, SourceBrowserProps, SourceBrowserRow, SourceBrowserWords, type SourceCard, SourcePick, TUTORIAL_SCENES, Tutorial, TutorialProps, WelcomeStep, WelcomeStepProps, extensionMarkOf, hasFeatureDemo, transcriptPreviewOptions, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep, useSignIn };

package/dist/onboarding/index.js

@@ -1,4 +1,5 @@
 import { OnboardingHostProvider, OnboardingProvider, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep } from "./OnboardingProvider.js";
+import { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark, extensionMarkOf } from "./marks.js";
 import { useSignIn } from "./useSignIn.js";
 import { DemoStage } from "./demos/parts.js";
 import { TUTORIAL_SCENES } from "./demos/how-it-works.js";
@@ -8,7 +9,6 @@ import { ApprovalDemo, SandboxDemo } from "./demos/autonomy.js";
 import { OnboardingStepFrame } from "./OnboardingStepFrame.js";
 import { AutonomyStep } from "./steps/AutonomyStep.js";
 import { ConnectorsStep } from "./steps/ConnectorsStep.js";
-import { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark } from "./marks.js";
 import { ConnectStep } from "./steps/ConnectStep.js";
 import { ConversationPresetPreview, ConversationPreview, transcriptPreviewOptions } from "./conversation.js";
 import { ConversationStep } from "./steps/ConversationStep.js";
@@ -19,8 +19,9 @@ import { FeaturesStep } from "./steps/FeaturesStep.js";
 import { ImportStep } from "./steps/ImportStep.js";
 import { LookStep } from "./steps/LookStep.js";
 import { ReadyStep } from "./steps/ReadyStep.js";
+import { SourceBrowser } from "./sources/SourceBrowser.js";
 import { GITHUB_SKILL_SOURCE_IMAGES, SkillSourceBrowser } from "./skills/SkillSourceBrowser.js";
 import { SkillsStep } from "./steps/SkillsStep.js";
 import { WelcomeStep } from "./steps/WelcomeStep.js";
 import { ONBOARDING_STEP_COMPONENTS, OnboardingFlow } from "./OnboardingFlow.js";
-export { ApprovalDemo, AutonomyStep, ConnectProviderCard, ConnectStep, ConnectorsStep, ConversationPresetPreview, ConversationPreview, ConversationStep, DemoStage, ExtensionDemo, ExtensionMark, ExtensionsStep, FeatureDemo, FeaturesStep, GITHUB_SKILL_SOURCE_IMAGES, ImportStep, LookStep, NATIVE_EXTENSION_ICONS, ONBOARDING_STEP_COMPONENTS, OnboardingFlow, OnboardingHostProvider, OnboardingProvider, OnboardingStepFrame, ProviderMark, ReadyStep, SandboxDemo, SkillSourceBrowser, SkillsStep, TUTORIAL_SCENES, Tutorial, WelcomeStep, hasFeatureDemo, transcriptPreviewOptions, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep, useSignIn };
+export { ApprovalDemo, AutonomyStep, ConnectProviderCard, ConnectStep, ConnectorsStep, ConversationPresetPreview, ConversationPreview, ConversationStep, DemoStage, ExtensionDemo, ExtensionMark, ExtensionsStep, FeatureDemo, FeaturesStep, GITHUB_SKILL_SOURCE_IMAGES, ImportStep, LookStep, NATIVE_EXTENSION_ICONS, ONBOARDING_STEP_COMPONENTS, OnboardingFlow, OnboardingHostProvider, OnboardingProvider, OnboardingStepFrame, ProviderMark, ReadyStep, SandboxDemo, SkillSourceBrowser, SkillsStep, SourceBrowser, TUTORIAL_SCENES, Tutorial, WelcomeStep, extensionMarkOf, hasFeatureDemo, transcriptPreviewOptions, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep, useSignIn };

package/dist/onboarding/marks.d.ts

@@ -1,7 +1,7 @@
 import { BrandMarkSize } from "../components/BrandMark.js";
-import { NativeExtensionEntry, OnboardingProvider } from "zidane/chat/pure";
+import { ExtensionMark as ExtensionMark$1, OnboardingProvider } from "zidane/chat/pure";
 //#region src/onboarding/marks.d.ts
-/** The icons of the native extensions without a logo. The others without one show their letter. */
+/** The icons of the native extensions, by name (their catalog `icon.gui`). */
 declare const NATIVE_EXTENSION_ICONS: Readonly<Record<string, string>>;
 /** Props of {@link ProviderMark}. */
 interface ProviderMarkProps {
@@ -18,20 +18,42 @@ interface ProviderMarkProps {
  * @param props - Component props.
  */
 declare function ProviderMark({ provider, size, className }: ProviderMarkProps): import("react").JSX.Element;
+/** The extension an {@link ExtensionMark} draws. */
+interface ExtensionMarkEntry {
+  /** Its id (folder name), which also finds its native catalog entry. */
+  name: string;
+  /** Its display name. Absent: the catalog's label, else `name`. */
+  label?: string;
+  /** Its own icon (definition or manifest), which wins over everything. */
+  icon?: {
+    gui?: string;
+    tui?: string;
+  };
+  /** A logo a listing gives it (a Simple Icons slug), read after its own icon. */
+  brand?: string;
+}
+/**
+ * The mark of an extension: its own icon, else the logo a listing gives it, else `extensionMark`'s
+ * (the native catalog's logo or icon, else its letter).
+ *
+ * @param entry - The extension.
+ */
+declare function extensionMarkOf(entry: ExtensionMarkEntry): ExtensionMark$1;
 /** Props of {@link ExtensionMark}. */
 interface ExtensionMarkProps {
-  /** The extension: its name, label and logo. */
-  entry: Pick<NativeExtensionEntry, 'name' | 'label' | 'brand'>;
-  /** 18, 28 or 40 pixels. */
+  /** The extension: its name, display name, own icon and logo. */
+  entry: ExtensionMarkEntry;
+  /** 18, 28 or 40 pixels, or one em (`xs`, the settings nav's icon box). */
   size?: BrandMarkSize;
   /** Extra classes on the root element. */
   className?: string;
 }
 /**
- * Renders a native extension's logo, its icon, or its letter.
+ * Renders an extension's mark: its own icon, its logo, or its letter, on a tinted tile. The
+ * Extensions rows, the source browser's rows and the settings nav draw this one.
  *
  * @param props - Component props.
  */
 declare function ExtensionMark({ entry, size, className }: ExtensionMarkProps): import("react").JSX.Element;
 //#endregion
-export { ExtensionMark, ExtensionMarkProps, NATIVE_EXTENSION_ICONS, ProviderMark, ProviderMarkProps };
+export { ExtensionMark, ExtensionMarkEntry, ExtensionMarkProps, NATIVE_EXTENSION_ICONS, ProviderMark, ProviderMarkProps, extensionMarkOf };

package/dist/onboarding/marks.js

@@ -1,16 +1,18 @@
 import { BrandMark } from "../components/BrandMark.js";
 import { jsx } from "react/jsx-runtime";
-import { nativeExtensionByName } from "zidane/chat/pure";
+import { NATIVE_EXTENSIONS, extensionMark, nativeExtensionByName } from "zidane/chat/pure";
 //#region src/onboarding/marks.tsx
 /**
-* The marks of the services the wizard names: a model provider and a native
+* The marks of the services the wizard names: a model provider and an
 * extension, each a `BrandMark` with its logo, or the icon or the letter
-* that stands in for it. Connect, Extensions and Ready draw them, and so can
-* an app's Settings and docs, so a service looks the same everywhere. A
-* connector has a logo or a letter, so a plain `BrandMark` draws it.
+* that stands in for it. Connect, Extensions and Ready draw them, and so do
+* Settings › Extensions (its rows and its source browser) and the settings
+* nav, so a service looks the same everywhere. An extension's mark is
+* `extensionMark`'s: its own icon, else the native catalog's logo, else its
+* letter. A connector has a logo or a letter, so a plain `BrandMark` draws it.
 */
-/** The icons of the native extensions without a logo. The others without one show their letter. */
-const NATIVE_EXTENSION_ICONS = { goal: "i-ph-target" };
+/** The icons of the native extensions, by name (their catalog `icon.gui`). */
+const NATIVE_EXTENSION_ICONS = Object.fromEntries(NATIVE_EXTENSIONS.flatMap((entry) => entry.icon?.gui ? [[entry.name, entry.icon.gui]] : []));
 /**
 * Renders a provider's logo: its own, the one of the extension that adds it, a chip for a local server, or its letter.
 *
@@ -27,18 +29,42 @@ function ProviderMark({ provider, size = "md", className }) {
 	});
 }
 /**
-* Renders a native extension's logo, its icon, or its letter.
+* The mark of an extension: its own icon, else the logo a listing gives it, else `extensionMark`'s
+* (the native catalog's logo or icon, else its letter).
+*
+* @param entry - The extension.
+*/
+function extensionMarkOf(entry) {
+	const own = entry.icon?.gui?.trim();
+	if (own) return {
+		kind: "icon",
+		gui: own
+	};
+	if (entry.brand) return {
+		kind: "brand",
+		brand: entry.brand
+	};
+	return extensionMark({
+		id: entry.name,
+		...entry.label ? { name: entry.label } : {}
+	});
+}
+/**
+* Renders an extension's mark: its own icon, its logo, or its letter, on a tinted tile. The
+* Extensions rows, the source browser's rows and the settings nav draw this one.
 *
 * @param props - Component props.
 */
 function ExtensionMark({ entry, size = "md", className }) {
+	const mark = extensionMarkOf(entry);
 	return /* @__PURE__ */ jsx(BrandMark, {
-		brand: entry.brand,
-		label: entry.label,
-		icon: NATIVE_EXTENSION_ICONS[entry.name],
+		brand: mark.kind === "brand" ? mark.brand : void 0,
+		icon: mark.kind === "icon" ? mark.gui : void 0,
+		letter: mark.kind === "letter" ? mark.letter : void 0,
+		label: entry.label ?? nativeExtensionByName(entry.name)?.label ?? entry.name,
 		size,
 		className
 	});
 }
 //#endregion
-export { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark };
+export { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark, extensionMarkOf };

package/dist/onboarding/skills/SkillSourceBrowser.js

@@ -1,34 +1,34 @@
-import { buttonClass } from "../../components/button.js";
-import { EmptyState } from "../../components/Surface.js";
-import { ErrorNote, INPUT_CLASS } from "../../components/Form.js";
 import { useOnboardingLabels } from "../OnboardingProvider.js";
-import { SkeletonListing, SkillRow, SourceChips, SourceHeader, SourceRows } from "./parts.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { SkillRow } from "./parts.js";
+import { SourceBrowser } from "../sources/SourceBrowser.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
 import { RECOMMENDED_SKILL_SOURCES, githubAvatarUrl, githubPreviewImageUrl, skillPickOf } from "zidane/chat/pure";
 //#region src/onboarding/skills/SkillSourceBrowser.tsx
 /**
-* Finds skills in a repository or a pack, and picks them. A field takes any
-* source the installer takes. Until a source opens, the recommended
-* sources show as rows with their preview image. Once one opens, they turn
-* into chips above it, and the source shows its GitHub card over its
-* skills, as rows to check. The compact version, for a Settings page, keeps
-* the chips at all times and shows no preview image. Picks can span sources: the parent keeps them (a
-* wizard draft, a Settings form) and installs them.
-*
-* A source lists once per mount: switching back to it is instant. A late
-* answer for a source the user left is dropped.
+* Finds skills in a repository or a pack, and picks them: the source browser
+* (`SourceBrowser`) over skill listings. Until a source opens, the
+* recommended sources show as rows with their preview image; once one
+* opens, they turn into chips above it, and the source shows its GitHub card
+* over its skills, as rows to check. The compact version, for a Settings
+* page, keeps the chips at all times and shows no preview image. Picks can
+* span sources: the parent keeps them (a wizard draft, a Settings form) and
+* installs them. A skill a pasted command names is picked once its source lists.
 */
 /** The pictures of GitHub: owner avatars and repository previews. */
 const GITHUB_SKILL_SOURCE_IMAGES = {
 	avatar: (owner) => githubAvatarUrl(owner),
 	preview: (owner, repo) => githubPreviewImageUrl(owner, repo)
 };
-/** Above this many skills, a filter field shows over the list. */
-const FILTER_FROM = 12;
-function messageOf(error) {
-	return error instanceof Error ? error.message : String(error);
-}
+const itemsOf = (listing) => listing.skills;
+const cardOf = (listing) => listing.source;
+const searchText = (skill) => [
+	skill.name,
+	skill.description,
+	skill.path,
+	skill.from ?? ""
+];
+const truncatedOf = (listing) => listing.truncated === true;
 /**
 * Renders the skill source browser: a field, the recommended sources, and the skills of the open source.
 *
@@ -36,237 +36,46 @@ function messageOf(error) {
 */
 function SkillSourceBrowser({ browse, picks, onToggle, installed = [], sources = RECOMMENDED_SKILL_SOURCES, images = GITHUB_SKILL_SOURCE_IMAGES, initial, compact = false, className = "", style }) {
 	const labels = useOnboardingLabels();
-	const id = useId();
-	const [field, setField] = useState("");
-	const [filter, setFilter] = useState("");
-	const [opened, setOpened] = useState(() => initial ? {
-		input: initial.trim(),
-		kind: "loading"
-	} : null);
-	const listings = useRef(/* @__PURE__ */ new Map());
-	const seq = useRef(0);
-	const panel = useRef(null);
 	const toggle = useRef(onToggle);
 	useEffect(() => {
 		toggle.current = onToggle;
 	});
-	const load = useCallback((text, n) => {
-		browse(text).then((listing) => {
-			listings.current.set(text, listing);
-			if (seq.current !== n) return;
-			setOpened({
-				input: text,
-				kind: "ready",
-				listing
-			});
-			const named = listing.skills.filter((skill) => listing.preselect?.includes(skill.name));
-			if (named.length > 0) toggle.current(named.map((skill) => skillPickOf(skill, listing)), true);
-		}, (error) => {
-			if (seq.current === n) setOpened({
-				input: text,
-				kind: "error",
-				message: messageOf(error)
-			});
-		});
-	}, [browse]);
-	const open = useCallback((input) => {
-		const text = input.trim();
-		if (!text) return;
-		const n = ++seq.current;
-		setFilter("");
-		const known = listings.current.get(text);
-		if (known) {
-			setOpened({
-				input: text,
-				kind: "ready",
-				listing: known
-			});
-			return;
-		}
-		setOpened({
-			input: text,
-			kind: "loading"
-		});
-		load(text, n);
-	}, [load]);
-	useEffect(() => {
-		const counter = seq;
-		if (initial?.trim()) load(initial.trim(), counter.current);
-		return () => {
-			counter.current++;
-		};
+	const onListed = useCallback((listing) => {
+		const named = listing.skills.filter((skill) => listing.preselect?.includes(skill.name));
+		if (named.length > 0) toggle.current(named.map((skill) => skillPickOf(skill, listing)), true);
 	}, []);
-	const pickKeys = useMemo(() => new Set(picks.map((pick) => pick.key)), [picks]);
-	const pickedIn = (listing) => listing.skills.filter((skill) => pickKeys.has(skillPickOf(skill, listing).key)).length;
-	const pickedFrom = (source) => {
-		const listing = listings.current.get(source.spec);
-		return listing ? pickedIn(listing) : 0;
-	};
-	const openSource = (source) => {
-		setField("");
-		open(source.spec);
-		panel.current?.scrollIntoView?.({ block: "nearest" });
-	};
-	const close = () => {
-		seq.current++;
-		setOpened(null);
-	};
-	const submit = (event) => {
-		event.preventDefault();
-		open(field);
-	};
-	const listing = opened?.kind === "ready" ? opened.listing : null;
-	const selectable = listing ? listing.skills.filter((skill) => !installed.includes(skill.name)) : [];
-	const query = filter.trim().toLowerCase();
-	const shown = listing && query ? listing.skills.filter((skill) => [
-		skill.name,
-		skill.description,
-		skill.path,
-		skill.from ?? ""
-	].some((text) => text.toLowerCase().includes(query))) : listing?.skills ?? [];
-	const picked = listing ? pickedIn(listing) : 0;
-	const allPicked = selectable.length > 0 && selectable.every((skill) => pickKeys.has(skillPickOf(skill, listing).key));
-	return /* @__PURE__ */ jsxs("div", {
-		className: `zg-source flex flex-col gap-3 min-w-0 ${className}`,
-		style,
-		children: [
-			/* @__PURE__ */ jsxs("form", {
-				onSubmit: submit,
-				children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: `${id}-source`,
-					className: "sr-only",
-					children: labels.sourceField
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: "relative flex-1 min-w-0",
-						children: [/* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
-							className: "i-ph-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-zg-label text-[var(--zg-text-muted)] pointer-events-none"
-						}), /* @__PURE__ */ jsx("input", {
-							id: `${id}-source`,
-							value: field,
-							onChange: (event) => setField(event.target.value),
-							placeholder: labels.sourcePlaceholder,
-							spellCheck: false,
-							autoComplete: "off",
-							className: `${INPUT_CLASS} pl-8 text-ellipsis`
-						})]
-					}), /* @__PURE__ */ jsx("button", {
-						type: "submit",
-						disabled: !field.trim(),
-						className: buttonClass({ variant: "secondary" }),
-						children: labels.browse
-					})]
-				})]
-			}),
-			opened && !compact ? /* @__PURE__ */ jsx(SourceChips, {
-				sources,
-				images,
-				current: opened.input,
-				picked: pickedFrom,
-				onOpen: openSource,
-				onClose: close
-			}) : /* @__PURE__ */ jsxs("div", {
-				role: "group",
-				"aria-labelledby": `${id}-recommended`,
-				className: "flex flex-col gap-2",
-				children: [/* @__PURE__ */ jsx("h3", {
-					id: `${id}-recommended`,
-					className: "zg-section-label m-0 px-1",
-					children: labels.recommendedSources
-				}), compact ? /* @__PURE__ */ jsx(SourceChips, {
-					sources,
-					images,
-					current: opened?.input,
-					picked: pickedFrom,
-					onOpen: openSource,
-					...opened ? { onClose: close } : {}
-				}) : /* @__PURE__ */ jsx("div", {
-					className: "zg-tray rounded-zg-xl p-2",
-					children: /* @__PURE__ */ jsx(SourceRows, {
-						sources,
-						images,
-						picked: pickedFrom,
-						onOpen: openSource
-					})
-				})]
-			}),
-			opened && /* @__PURE__ */ jsxs("div", {
-				ref: panel,
-				className: "zg-tray rounded-zg-xl p-2 flex flex-col gap-1 min-w-0",
-				"aria-busy": opened.kind === "loading",
-				children: [
-					opened.kind === "loading" && /* @__PURE__ */ jsx(SkeletonListing, {
-						label: labels.browsing(opened.input),
-						preview: !compact
-					}),
-					opened.kind === "error" && /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col gap-3 p-3",
-						children: [/* @__PURE__ */ jsx(ErrorNote, { children: labels.browseFailed(opened.message) }), /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: () => open(opened.input),
-							className: `${buttonClass({
-								variant: "secondary",
-								size: "sm"
-							})} self-start`,
-							children: labels.retry
-						})]
-					}),
-					listing && /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsx(SourceHeader, {
-							listing,
-							images,
-							picked,
-							allPicked,
-							preview: !compact,
-							onSelectAll: (on) => onToggle(selectable.map((skill) => skillPickOf(skill, listing)), on)
-						}),
-						listing.truncated && /* @__PURE__ */ jsx("p", {
-							className: "m-0 px-3 pb-2 text-zg-meta text-zg-warn",
-							children: labels.listingTruncated
-						}),
-						listing.skills.length > FILTER_FROM && /* @__PURE__ */ jsxs("div", {
-							className: "relative px-1 pb-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "i-ph-funnel-simple absolute left-3.5 top-1/2 -translate-y-1/2 -mt-0.5 text-zg-label text-[var(--zg-text-muted)] pointer-events-none"
-							}), /* @__PURE__ */ jsx("input", {
-								value: filter,
-								onChange: (event) => setFilter(event.target.value),
-								placeholder: labels.filterSkills,
-								"aria-label": labels.filterSkills,
-								spellCheck: false,
-								className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled pl-8`
-							})]
-						}),
-						listing.skills.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
-							icon: "i-ph-folder-dashed",
-							title: labels.noSkills,
-							hint: labels.noSkillsHint,
-							framed: false,
-							compact: true
-						}) : shown.length === 0 ? /* @__PURE__ */ jsx("p", {
-							className: "m-0 px-3 py-4 text-zg-label text-[var(--zg-text-muted)]",
-							children: labels.noSkillMatch
-						}) : /* @__PURE__ */ jsx("div", {
-							role: "group",
-							"aria-label": listing.source.label,
-							className: "flex flex-col",
-							children: shown.map((skill) => {
-								const pick = skillPickOf(skill, listing);
-								return /* @__PURE__ */ jsx(SkillRow, {
-									skill,
-									picked: pickKeys.has(pick.key),
-									installed: installed.includes(skill.name),
-									onToggle: (on) => onToggle([pick], on)
-								}, pick.key);
-							})
-						})
-					] })
-				]
-			})
-		]
+	const selectable = useCallback((skill) => !installed.includes(skill.name), [installed]);
+	const renderRow = useCallback(({ item, picked, onToggle: toggleRow }) => /* @__PURE__ */ jsx(SkillRow, {
+		skill: item,
+		picked,
+		installed: installed.includes(item.name),
+		onToggle: toggleRow
+	}), [installed]);
+	return /* @__PURE__ */ jsx(SourceBrowser, {
+		browse,
+		itemsOf,
+		cardOf,
+		pickOf: skillPickOf,
+		selectable,
+		renderRow,
+		searchText,
+		words: {
+			count: labels.skillCount,
+			empty: labels.noSkills,
+			emptyHint: labels.noSkillsHint,
+			filter: labels.filterSkills,
+			noMatch: labels.noSkillMatch
+		},
+		picks,
+		onToggle,
+		truncatedOf,
+		onListed,
+		sources,
+		images,
+		...initial ? { initial } : {},
+		compact,
+		className,
+		style
 	});
 }
 //#endregion

package/dist/onboarding/skills/parts.d.ts

@@ -1,6 +1,6 @@
 import { SkillSourceImages } from "../headless/host.js";
 import { CSSProperties } from "react";
-import { RecommendedSkillSource, SkillSourceListing, SkillSourceSkill } from "zidane/chat/pure";
+import { RecommendedSkillSource, SkillSourceSkill } from "zidane/chat/pure";
 //#region src/onboarding/skills/parts.d.ts
 /** Props of {@link SourceAvatar}. */
 interface SourceAvatarProps {
@@ -72,12 +72,39 @@ interface SourceChipsProps {
  * @param props - Component props.
  */
 declare function SourceChips({ sources, images, current, picked, onOpen, onClose, className, style }: SourceChipsProps): import("react").JSX.Element;
+/** What the card of an open source shows. A skills listing's `source` is one. */
+interface SourceCard {
+  /** `npm` links to npm; anything else to GitHub. */
+  kind: string;
+  /** Its short name: `owner/repo`, the package. */
+  label: string;
+  /** GitHub owner: the avatar and the preview. */
+  owner?: string;
+  /** GitHub repository: the preview. */
+  repo?: string;
+  /** The page to open. Absent: no link. */
+  url?: string;
+  /** Its own description. */
+  description?: string;
+  /** GitHub stars. */
+  stars?: number;
+  /** The owner's avatar, when `images` has none. */
+  avatarUrl?: string;
+  /** The preview image, when `images` has none. */
+  imageUrl?: string;
+  /** A skills pack: its skills come from other repositories. */
+  collection?: boolean;
+}
 /** Props of {@link SourceHeader}. */
 interface SourceHeaderProps {
-  listing: SkillSourceListing;
+  source: SourceCard;
+  /** How many rows it holds, worded (`12 skills`). */
+  count: string;
   images: SkillSourceImages;
   picked: number;
   allPicked: boolean;
+  /** Some rows can be picked: Select all shows. */
+  selectable: boolean;
   onSelectAll: (on: boolean) => void;
   /** Show the repository's preview image. */
   preview?: boolean;
@@ -91,7 +118,7 @@ interface SourceHeaderProps {
  *
  * @param props - Component props.
  */
-declare function SourceHeader({ listing, images, picked, allPicked, onSelectAll, preview, className, style }: SourceHeaderProps): import("react").JSX.Element;
+declare function SourceHeader({ source, count, images, picked, allPicked, selectable, onSelectAll, preview, className, style }: SourceHeaderProps): import("react").JSX.Element;
 /** Props of {@link SkillRow}. */
 interface SkillRowProps {
   skill: SkillSourceSkill;
@@ -125,4 +152,4 @@ interface SkeletonListingProps {
  */
 declare function SkeletonListing({ label, preview, className, style }: SkeletonListingProps): import("react").JSX.Element;
 //#endregion
-export { SkeletonListing, SkeletonListingProps, SkillRow, SkillRowProps, SourceAvatar, SourceAvatarProps, SourceChips, SourceChipsProps, SourceHeader, SourceHeaderProps, SourcePreview, SourcePreviewProps, SourceRows, SourceRowsProps };
+export { SkeletonListing, SkeletonListingProps, SkillRow, SkillRowProps, SourceAvatar, SourceAvatarProps, SourceCard, SourceChips, SourceChipsProps, SourceHeader, SourceHeaderProps, SourcePreview, SourcePreviewProps, SourceRows, SourceRowsProps };

package/dist/onboarding/skills/parts.js

@@ -2,15 +2,16 @@ import { BrandMark } from "../../components/BrandMark.js";
 import { buttonClass } from "../../components/button.js";
 import { Checkbox, MetaChip } from "../../components/Form.js";
 import { useOnboardingLabels } from "../OnboardingProvider.js";
+import { RoutedLink } from "../../extensions/links.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { skillCategory } from "zidane/chat/pure";
 //#region src/onboarding/skills/parts.tsx
 /**
-* The pieces of the skill source browser: a source's avatar and preview
-* image, the recommended sources (rows with their preview, or chips once a
-* source is open), the header of an open source, a skill's row and the
-* skeleton rows of a loading source. Pictures load into fixed boxes, so
+* The pieces of the source browser (`SourceBrowser`, for skills and
+* extensions): a source's avatar and preview image, the recommended sources
+* (rows with their preview, or chips once a source is open), the header of
+* an open source, a skill's row and the skeleton rows of a loading source. Pictures load into fixed boxes, so
 * nothing moves when they arrive, and fade in. There are a few per view, so
 * they load at once rather than lazily.
 */
@@ -201,13 +202,11 @@ function SourceChips({ sources, images, current, picked, onOpen, onClose, classN
 *
 * @param props - Component props.
 */
-function SourceHeader({ listing, images, picked, allPicked, onSelectAll, preview = true, className, style }) {
+function SourceHeader({ source, count, images, picked, allPicked, selectable, onSelectAll, preview = true, className, style }) {
 	const labels = useOnboardingLabels();
-	const { source, skills } = listing;
 	const owner = source.owner;
 	const avatar = owner ? images.avatar(owner) ?? source.avatarUrl : void 0;
 	const image = owner && source.repo ? images.preview(owner, source.repo) ?? source.imageUrl : void 0;
-	const selectable = skills.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: ["flex items-start gap-4 p-2 pb-3 min-w-0", className].filter(Boolean).join(" "),
 		style,
@@ -242,10 +241,8 @@ function SourceHeader({ listing, images, picked, allPicked, onSelectAll, preview
 								className: "i-ph-star-fill"
 							}), labels.stars(source.stars)]
 						}),
-						/* @__PURE__ */ jsxs("a", {
+						source.url && /* @__PURE__ */ jsxs(RoutedLink, {
 							href: source.url,
-							target: "_blank",
-							rel: "noreferrer",
 							className: `${buttonClass({
 								variant: "ghost",
 								size: "xs",
@@ -271,7 +268,7 @@ function SourceHeader({ listing, images, picked, allPicked, onSelectAll, preview
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "zg-meta",
-							children: labels.skillCount(skills.length)
+							children: count
 						}),
 						picked > 0 && /* @__PURE__ */ jsx(MetaChip, {
 							tone: "accent",