@segmentstream-cloud/app 0.1.0 → 0.3.0

package/dist/ui/sign-in.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { safeReturnTo } from "../return-to.js";
+import { useSession } from "./hooks.js";
+import { navigate } from "./navigation.js";
+import { NOT_INVITED, authClient, clearSession, refreshSession } from "./store.js";
+/** Seconds before another code may be requested. */
+const RESEND_AFTER_SECONDS = 30;
+const CODE_LENGTH = 6;
+const noSubscription = () => () => { };
+/** The page's own query string; empty during server rendering. */
+function useSearchParameter(name) {
+    const search = useSyncExternalStore(noSubscription, () => window.location.search, () => "");
+    return new URLSearchParams(search).get(name);
+}
+/**
+ * Email code sign-in with Neon Auth: the email address, then the six-digit code sent to it. New
+ * addresses get an account on first sign-in; whether they may use the app is the ontology's
+ * decision, which `requireUser()` reports as `not_invited`.
+ */
+export function SignIn({ returnTo, error: reason, title = "Sign in" }) {
+    const ids = useId();
+    const session = useSession();
+    const pageReturnTo = useSearchParameter("returnTo");
+    const pageError = useSearchParameter("error");
+    const [step, setStep] = useState("email");
+    const [email, setEmail] = useState("");
+    const [code, setCode] = useState("");
+    const [pending, setPending] = useState(null);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    /** Seconds until another code may be requested. */
+    const [resendIn, setResendIn] = useState(0);
+    const [switchingAccount, setSwitchingAccount] = useState(false);
+    const codeInput = useRef(null);
+    const verifying = useRef(false);
+    const resendTimer = useRef(undefined);
+    const destination = safeReturnTo(returnTo ?? pageReturnTo);
+    const notInvited = (reason ?? pageError) === NOT_INVITED && !switchingAccount;
+    useEffect(() => () => clearInterval(resendTimer.current), []);
+    useEffect(() => {
+        if (step === "code") {
+            codeInput.current?.focus();
+        }
+    }, [step]);
+    function holdResend() {
+        const deadline = Date.now() + RESEND_AFTER_SECONDS * 1000;
+        clearInterval(resendTimer.current);
+        setResendIn(RESEND_AFTER_SECONDS);
+        resendTimer.current = setInterval(() => {
+            const remaining = Math.max(0, Math.ceil((deadline - Date.now()) / 1000));
+            setResendIn(remaining);
+            if (remaining === 0) {
+                clearInterval(resendTimer.current);
+            }
+        }, 1000);
+    }
+    async function sendCode(address) {
+        const result = await attempt(() => authClient().emailOtp.sendVerificationOtp({ email: address, type: "sign-in" }));
+        if (result !== null) {
+            setError(signInErrorMessage(result));
+            return false;
+        }
+        holdResend();
+        return true;
+    }
+    async function submitEmail(event) {
+        event.preventDefault();
+        const address = email.trim();
+        if (address === "") {
+            setError("Enter your email address.");
+            return;
+        }
+        setPending("send");
+        setError(null);
+        setNotice(null);
+        if (await sendCode(address)) {
+            setEmail(address);
+            setCode("");
+            setStep("code");
+        }
+        setPending(null);
+    }
+    async function verify(value) {
+        // The sixth digit and the Enter key may both submit the same code.
+        if (verifying.current) {
+            return;
+        }
+        if (!new RegExp(`^[0-9]{${CODE_LENGTH}}$`).test(value)) {
+            setError(`Enter the ${CODE_LENGTH}-digit code from the email.`);
+            return;
+        }
+        verifying.current = true;
+        setPending("verify");
+        setError(null);
+        setNotice(null);
+        const result = await attempt(() => authClient().signIn.emailOtp({ email, otp: value }));
+        if (result !== null) {
+            verifying.current = false;
+            setError(signInErrorMessage(result));
+            setCode("");
+            setPending(null);
+            codeInput.current?.focus();
+            return;
+        }
+        navigate(destination);
+    }
+    async function resend() {
+        setPending("resend");
+        setError(null);
+        setNotice(null);
+        if (await sendCode(email)) {
+            setCode("");
+            setNotice(`We sent a new code to ${email}.`);
+        }
+        setPending(null);
+    }
+    function changeEmail() {
+        setStep("email");
+        setCode("");
+        setError(null);
+        setNotice(null);
+    }
+    async function switchAccount() {
+        setPending("sign-out");
+        setError(null);
+        await attempt(() => authClient().signOut());
+        clearSession();
+        await refreshSession();
+        setSwitchingAccount(true);
+        setStep("email");
+        setPending(null);
+    }
+    const errorId = `${ids}-error`;
+    const sessionEmail = session.status === "signed-in" ? (session.user.email ?? session.user.name) : null;
+    if (notInvited) {
+        return (_jsxs("section", { className: "ss-card ss-sign-in", "aria-labelledby": `${ids}-title`, children: [_jsx("h1", { id: `${ids}-title`, className: "ss-title", children: "Ask for an invitation" }), _jsxs("p", { className: "ss-text", children: [sessionEmail === null ? "You are signed in" : `You are signed in as ${sessionEmail}`, ", but this app has not invited you. Ask your administrator for an invitation, or sign in with another email address."] }), error !== null && (_jsx("p", { id: errorId, className: "ss-error", role: "alert", children: error })), _jsx("button", { type: "button", className: "ss-button", onClick: () => void switchAccount(), disabled: pending !== null, "aria-busy": pending === "sign-out", children: pending === "sign-out" ? "Signing out…" : "Use another email" })] }));
+    }
+    if (session.status === "signed-in" && step === "email" && pending === null && !switchingAccount) {
+        return (_jsxs("section", { className: "ss-card ss-sign-in", "aria-labelledby": `${ids}-title`, children: [_jsx("h1", { id: `${ids}-title`, className: "ss-title", children: "You are signed in" }), _jsx("p", { className: "ss-text", children: sessionEmail === null ? "You already have a session." : `Signed in as ${sessionEmail}.` }), _jsxs("div", { className: "ss-actions", children: [_jsx("a", { className: "ss-button", href: destination, children: "Continue" }), _jsx("button", { type: "button", className: "ss-button ss-button--secondary", onClick: () => void switchAccount(), children: "Use another email" })] })] }));
+    }
+    if (step === "email") {
+        return (_jsxs("section", { className: "ss-card ss-sign-in", "aria-labelledby": `${ids}-title`, children: [_jsx("h1", { id: `${ids}-title`, className: "ss-title", children: title }), _jsxs("p", { className: "ss-text", children: ["We will email you a ", CODE_LENGTH, "-digit code to sign in."] }), _jsxs("form", { className: "ss-form", onSubmit: (event) => void submitEmail(event), noValidate: true, children: [_jsxs("div", { className: "ss-field", children: [_jsx("label", { className: "ss-label", htmlFor: `${ids}-email`, children: "Email" }), _jsx("input", { id: `${ids}-email`, className: "ss-input", type: "email", name: "email", autoComplete: "email", inputMode: "email", required: true, value: email, onChange: (event) => setEmail(event.target.value), disabled: pending !== null, "aria-invalid": error !== null, "aria-describedby": error === null ? undefined : errorId })] }), error !== null && (_jsx("p", { id: errorId, className: "ss-error", role: "alert", children: error })), _jsx("button", { type: "submit", className: "ss-button", disabled: pending !== null, "aria-busy": pending === "send", children: pending === "send" ? "Sending code…" : "Send code" })] })] }));
+    }
+    return (_jsxs("section", { className: "ss-card ss-sign-in", "aria-labelledby": `${ids}-title`, children: [_jsx("h1", { id: `${ids}-title`, className: "ss-title", children: "Check your email" }), _jsxs("p", { className: "ss-text", children: ["Enter the ", CODE_LENGTH, "-digit code we sent to ", _jsx("strong", { children: email }), "."] }), _jsxs("form", { className: "ss-form", onSubmit: (event) => {
+                    event.preventDefault();
+                    void verify(code);
+                }, noValidate: true, children: [_jsxs("div", { className: "ss-field", children: [_jsx("label", { className: "ss-label", htmlFor: `${ids}-code`, children: "Code" }), _jsx("input", { ref: codeInput, id: `${ids}-code`, className: "ss-input ss-input--code", type: "text", name: "code", inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9]*", maxLength: CODE_LENGTH, required: true, value: code, onChange: (event) => {
+                                    const digits = event.target.value.replace(/\D/g, "").slice(0, CODE_LENGTH);
+                                    setCode(digits);
+                                    if (digits.length === CODE_LENGTH) {
+                                        void verify(digits);
+                                    }
+                                }, disabled: pending === "verify", "aria-invalid": error !== null, "aria-describedby": error === null ? undefined : errorId })] }), error !== null && (_jsx("p", { id: errorId, className: "ss-error", role: "alert", children: error })), notice !== null && (_jsx("p", { className: "ss-notice", role: "status", children: notice })), _jsx("button", { type: "submit", className: "ss-button", disabled: pending !== null, "aria-busy": pending === "verify", children: pending === "verify" ? "Signing in…" : "Sign in" })] }), _jsxs("div", { className: "ss-actions", children: [_jsx("button", { type: "button", className: "ss-link", onClick: () => void resend(), disabled: pending !== null || resendIn > 0, "aria-busy": pending === "resend", children: pending === "resend"
+                            ? "Sending…"
+                            : resendIn > 0
+                                ? `Resend code in ${resendIn} s`
+                                : "Resend code" }), _jsx("button", { type: "button", className: "ss-link", onClick: changeEmail, disabled: pending !== null, children: "Use another email" })] })] }));
+}
+/** Runs a Neon Auth client call; its failure, returned or thrown, or `null` on success. */
+async function attempt(call) {
+    try {
+        const result = await call();
+        return result.error ?? null;
+    }
+    catch (error) {
+        return error ?? new Error("Sign-in failed.");
+    }
+}
+/** A sentence for a Neon Auth (Better Auth) failure. */
+export function signInErrorMessage(error) {
+    const details = typeof error === "object" && error !== null ? error : {};
+    const status = typeof details.status === "number" ? details.status : undefined;
+    const text = [details.code, details.message]
+        .filter((part) => typeof part === "string")
+        .join(" ")
+        .toLowerCase();
+    if (status === 429 || text.includes("rate limit") || text.includes("too many requests")) {
+        return "Too many requests. Wait a minute, then try again.";
+    }
+    if (text.includes("too many attempts") || text.includes("too_many_attempts")) {
+        return "Too many wrong codes. Send a new code.";
+    }
+    if (text.includes("expired")) {
+        return "That code has expired. Send a new one.";
+    }
+    if (text.includes("otp") || text.includes("code")) {
+        return "That code is not right. Check the email and try again.";
+    }
+    if (text.includes("email")) {
+        return "Enter a valid email address.";
+    }
+    if (status === undefined || status >= 500 || text.includes("network")) {
+        return "Sign-in is unavailable right now. Try again in a moment.";
+    }
+    return "Sign-in failed. Try again.";
+}

package/dist/ui/store.d.ts

@@ -0,0 +1,61 @@
+import { createAuthClient } from "@neondatabase/auth/next";
+import { NOT_INVITED, SegmentStreamApiError } from "../errors.js";
+import type { CurrentUser } from "../me.js";
+/** The Neon Auth API the app serves from `app/src/app/api/auth/[...path]/route.ts`. */
+export declare const AUTH_API_PATH = "/api/auth";
+/** The app's sign-in page. */
+export declare const SIGN_IN_PAGE = "/sign-in";
+export { NOT_INVITED };
+/** The person Neon Auth has signed in, before the ontology is asked about them. */
+export interface SessionUser {
+    readonly id: string;
+    readonly email: string | null;
+    readonly name: string | null;
+}
+export type SessionState = {
+    readonly status: "loading";
+} | {
+    readonly status: "signed-out";
+} | {
+    readonly status: "signed-in";
+    readonly sessionId: string;
+    readonly user: SessionUser;
+} | {
+    readonly status: "unavailable";
+};
+/** `useUser()`: the `/api/ontology/me` answer for the session, loaded once per session. */
+export type UserState = {
+    readonly status: "loading";
+    readonly user: null;
+    readonly error: null;
+} | {
+    readonly status: "signed-out";
+    readonly user: null;
+    readonly error: null;
+} | {
+    readonly status: "signed-in";
+    readonly user: CurrentUser;
+    readonly error: null;
+} | {
+    readonly status: "error";
+    readonly user: null;
+    readonly error: SegmentStreamApiError;
+};
+interface Snapshot {
+    readonly session: SessionState;
+    /** `/me` answers by Neon Auth session id. */
+    readonly users: ReadonlyMap<string, UserState>;
+}
+export declare const LOADING_USER: UserState;
+export declare const SIGNED_OUT_USER: UserState;
+/** The Neon Auth browser client, created on first use. It talks to the app's `/api/auth`. */
+export declare function authClient(): ReturnType<typeof createAuthClient>;
+export declare function subscribe(listener: () => void): () => void;
+export declare function getSnapshot(): Snapshot;
+export declare function getServerSnapshot(): Snapshot;
+/** Reads the session again, after signing in or out. */
+export declare function refreshSession(): Promise<void>;
+/** Forgets the session and every `/me` answer, after signing out. */
+export declare function clearSession(): void;
+/** Starts loading `/me` for a session unless it is loaded or loading. */
+export declare function ensureUser(sessionId: string): void;

package/dist/ui/store.js

@@ -0,0 +1,155 @@
+"use client";
+import { createAuthClient } from "@neondatabase/auth/next";
+import { NOT_INVITED, SegmentStreamApiError, apiErrorFrom, readJson } from "../errors.js";
+import { ME_PATH, parseMe } from "../me.js";
+/** The Neon Auth API the app serves from `app/src/app/api/auth/[...path]/route.ts`. */
+export const AUTH_API_PATH = "/api/auth";
+/** The app's sign-in page. */
+export const SIGN_IN_PAGE = "/sign-in";
+export { NOT_INVITED };
+export const LOADING_USER = { status: "loading", user: null, error: null };
+export const SIGNED_OUT_USER = { status: "signed-out", user: null, error: null };
+const SERVER_SNAPSHOT = { session: { status: "loading" }, users: new Map() };
+let snapshot = SERVER_SNAPSHOT;
+let sessionLoad = null;
+const loadingUsers = new Set();
+const listeners = new Set();
+let client;
+/** The Neon Auth browser client, created on first use. It talks to the app's `/api/auth`. */
+export function authClient() {
+    client ??= createAuthClient();
+    return client;
+}
+function update(change) {
+    snapshot = { ...snapshot, ...change };
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export function subscribe(listener) {
+    listeners.add(listener);
+    sessionLoad ??= loadSession();
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function getSnapshot() {
+    return snapshot;
+}
+export function getServerSnapshot() {
+    return SERVER_SNAPSHOT;
+}
+/** Reads the session again, after signing in or out. */
+export function refreshSession() {
+    sessionLoad = loadSession();
+    return sessionLoad;
+}
+/** Forgets the session and every `/me` answer, after signing out. */
+export function clearSession() {
+    loadingUsers.clear();
+    update({ session: { status: "signed-out" }, users: new Map() });
+}
+async function loadSession() {
+    let session;
+    try {
+        const response = await fetch(`${AUTH_API_PATH}/get-session`, {
+            credentials: "same-origin",
+            cache: "no-store",
+            headers: { accept: "application/json" },
+        });
+        session = response.ok
+            ? sessionFrom(await readJson(response))
+            : response.status === 401
+                ? { status: "signed-out" }
+                : { status: "unavailable" };
+    }
+    catch {
+        session = { status: "unavailable" };
+    }
+    update({ session });
+}
+function sessionFrom(payload) {
+    if (typeof payload !== "object" || payload === null) {
+        return { status: "signed-out" };
+    }
+    const { session, user } = payload;
+    if (typeof session !== "object" ||
+        session === null ||
+        typeof user !== "object" ||
+        user === null) {
+        return { status: "signed-out" };
+    }
+    const { id: sessionId } = session;
+    const { id, email, name } = user;
+    if (typeof sessionId !== "string" || typeof id !== "string") {
+        return { status: "signed-out" };
+    }
+    return {
+        status: "signed-in",
+        sessionId,
+        user: {
+            id,
+            email: typeof email === "string" ? email : null,
+            name: typeof name === "string" ? name : null,
+        },
+    };
+}
+/** Starts loading `/me` for a session unless it is loaded or loading. */
+export function ensureUser(sessionId) {
+    if (snapshot.users.has(sessionId) || loadingUsers.has(sessionId)) {
+        return;
+    }
+    loadingUsers.add(sessionId);
+    void loadUser().then((state) => {
+        if (!loadingUsers.delete(sessionId)) {
+            return; // Signed out meanwhile.
+        }
+        update({ users: new Map(snapshot.users).set(sessionId, state) });
+    });
+}
+/** The session's JWT from Neon Auth, then the ontology's account of the user. */
+async function loadUser() {
+    try {
+        const tokenResponse = await fetch(`${AUTH_API_PATH}/token`, {
+            credentials: "same-origin",
+            cache: "no-store",
+            headers: { accept: "application/json" },
+        });
+        if (tokenResponse.status === 401) {
+            return SIGNED_OUT_USER;
+        }
+        const tokenPayload = await readJson(tokenResponse);
+        const token = typeof tokenPayload === "object" && tokenPayload !== null
+            ? tokenPayload.token
+            : undefined;
+        if (!tokenResponse.ok || typeof token !== "string" || token === "") {
+            return failed("auth_unavailable", 503, "Neon Auth did not issue a token. Try again.");
+        }
+        const response = await fetch(ME_PATH, {
+            cache: "no-store",
+            headers: { accept: "application/json", authorization: `Bearer ${token}` },
+        });
+        const payload = await readJson(response);
+        if (!response.ok) {
+            return {
+                status: "error",
+                user: null,
+                error: apiErrorFrom(response.status, payload, "The ontology service rejected the user."),
+            };
+        }
+        const user = parseMe(payload);
+        return user === null
+            ? failed("ontology_invalid_response", 502, "GET /api/ontology/me answered an unexpected body.")
+            : { status: "signed-in", user, error: null };
+    }
+    catch (error) {
+        return failed("ontology_unreachable", 503, "The app's ontology could not be reached.", error);
+    }
+}
+function failed(code, status, detail, cause) {
+    return {
+        status: "error",
+        user: null,
+        error: new SegmentStreamApiError({ code, status, detail, retryable: true, cause }),
+    };
+}

package/dist/ui/styles.css

@@ -0,0 +1,249 @@
+/*
+ * @segmentstream-cloud/app/ui: neutral styles for the sign-in form and the user menu.
+ * Each rule is one class, so the app's own class selectors override it; the custom properties
+ * below change colours, radius and font in one place.
+ */
+
+:root {
+  --ss-font: inherit;
+  --ss-text: #111111;
+  --ss-muted: #5f5f5f;
+  --ss-surface: #ffffff;
+  --ss-border: #d4d4d4;
+  --ss-accent: #111111;
+  --ss-accent-text: #ffffff;
+  --ss-danger: #b42318;
+  --ss-focus: #2563eb;
+  --ss-radius: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ss-text: #f5f5f5;
+    --ss-muted: #a3a3a3;
+    --ss-surface: #171717;
+    --ss-border: #3f3f3f;
+    --ss-accent: #f5f5f5;
+    --ss-accent-text: #111111;
+    --ss-danger: #f97066;
+    --ss-focus: #60a5fa;
+  }
+}
+
+.ss-card {
+  box-sizing: border-box;
+  width: min(24rem, 100%);
+  margin: 0 auto;
+  padding: 2rem;
+  border: 1px solid var(--ss-border);
+  border-radius: calc(var(--ss-radius) * 2);
+  background: var(--ss-surface);
+  color: var(--ss-text);
+  font-family: var(--ss-font);
+}
+
+.ss-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  line-height: 1.25;
+}
+
+.ss-text {
+  margin: 0 0 1.25rem;
+  color: var(--ss-muted);
+  line-height: 1.5;
+}
+
+.ss-text strong {
+  color: var(--ss-text);
+}
+
+.ss-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.ss-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+.ss-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.ss-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--ss-border);
+  border-radius: var(--ss-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.ss-input--code {
+  font-size: 1.5rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.5em;
+  text-align: center;
+}
+
+.ss-input[aria-invalid="true"] {
+  border-color: var(--ss-danger);
+}
+
+.ss-input:focus-visible,
+.ss-button:focus-visible,
+.ss-link:focus-visible,
+.ss-user-menu-trigger:focus-visible {
+  outline: 2px solid var(--ss-focus);
+  outline-offset: 2px;
+}
+
+.ss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--ss-accent);
+  border-radius: var(--ss-radius);
+  background: var(--ss-accent);
+  color: var(--ss-accent-text);
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.ss-button--secondary {
+  background: transparent;
+  color: var(--ss-text);
+  border-color: var(--ss-border);
+}
+
+.ss-button:disabled,
+.ss-link:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ss-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ss-text);
+  font: inherit;
+  font-size: 0.875rem;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  cursor: pointer;
+}
+
+.ss-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1.25rem;
+}
+
+.ss-error {
+  margin: 0;
+  color: var(--ss-danger);
+  font-size: 0.875rem;
+}
+
+.ss-notice {
+  margin: 0;
+  color: var(--ss-muted);
+  font-size: 0.875rem;
+}
+
+.ss-user-menu {
+  position: relative;
+  display: inline-block;
+  color: var(--ss-text);
+  font-family: var(--ss-font);
+}
+
+.ss-user-menu-trigger {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  border: 1px solid var(--ss-border);
+  border-radius: 999px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.ss-user-menu-trigger::-webkit-details-marker {
+  display: none;
+}
+
+.ss-avatar {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: var(--ss-accent);
+  color: var(--ss-accent-text);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.ss-user-menu-label {
+  max-width: 12rem;
+  overflow: hidden;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ss-user-menu-panel {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  display: grid;
+  gap: 0.5rem;
+  min-width: 14rem;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--ss-border);
+  border-radius: var(--ss-radius);
+  background: var(--ss-surface);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+
+.ss-user-menu-name {
+  margin: 0;
+  font-weight: 600;
+}
+
+.ss-user-menu-email {
+  margin: 0;
+  color: var(--ss-muted);
+  font-size: 0.875rem;
+  overflow-wrap: anywhere;
+}
+
+.ss-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ss-badge {
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--ss-border);
+  border-radius: 999px;
+  font-size: 0.75rem;
+}