Repository

bridge-design-system/
  apps/
    handbook/             this site: the docs, /llms.txt and the /mcp server
  packages/
    ui/                   @brdgapp/ui: components, hooks, lib, globals.css
  DESIGN.md               the frozen visual spec
  PRODUCT.md              who Bridge is for
  .gitlab-ci.yml          checks on every push; publishes to npm on a version tag
  eslint.config.mjs       lint rules for every workspace
  package.json            workspaces and root commands

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@brdgapp/ui/components",
    "ui": "@brdgapp/ui/components",
    "lib": "@brdgapp/ui/lib",
    "hooks": "@brdgapp/ui/hooks",
    "utils": "@brdgapp/ui/lib/utils"
  }
}

import type * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@brdgapp/ui/lib/utils";

// The "Solid label" sticker from the Arch Design System: 8px, bold, uppercase. Ported from Bridge OS
// src/components/ui/badge.tsx. Rounded 4px, never a pill. For soft status and category labels use Tag.
// Two fixes over Bridge OS: solid-red fills with --danger-solid (white on --error fails AA at 4.41:1), and
// solid-dark's text uses --surface-primary so it stays readable in dark mode (white on light grey didn't).
const badgeVariants = cva(
  "inline-flex items-center rounded-[4px] px-[7px] py-1 text-[8px] leading-[8px] font-bold tracking-[1px] uppercase",
  {
    variants: {
      // Named `style` to match Bridge OS's API. It is not React's style prop: Badge takes no CSS styles.
      style: {
        outline: "border border-[var(--text-disabled)] text-[var(--text-muted)]",
        alum: "border border-[var(--honey)] text-[var(--honey)]",
        "solid-red": "bg-[var(--danger-solid)] text-white",
        "solid-dark": "bg-[var(--text-secondary)] text-[var(--surface-primary)]",
      },
    },
    defaultVariants: { style: "outline" },
  },
);

type BadgeProps = VariantProps<typeof badgeVariants> & {
  className?: string;
  children: React.ReactNode;
};

function Badge({ style, className, children }: BadgeProps) {
  return (
    <span data-slot="badge" className={cn(badgeVariants({ style }), className)}>
      {children}
    </span>
  );
}

export { Badge, badgeVariants };
export type { BadgeProps };

  // With `render` (for example a Next `Link`), the element keeps its own semantics: a link stays a
  // link. It owns its content, so `icon` and `loading` don't apply.
  const rendered = useRender({
    render: render as useRender.RenderProp,
    enabled: render !== undefined,
    props: mergeProps<"a">({ className: classes, "data-slot": "button" } as React.ComponentProps<"a">, props as React.ComponentProps<"a">, { children }),
  });
  if (rendered) return rendered;

src/
  app/
    page.tsx                 the overview
    [...slug]/page.tsx       every other page, driven by the registry
    llms.txt, llms-full.txt  the index and every component's guidance, for agents
    mcp/route.ts             the read-only MCP server
  components/design/
    registry/   pages.ts (every page), rules.ts (named rules), recipe.ts,
                loaders.ts and demo-data-pages.ts (generated), adoption.ts
    content/    one folder per page: doc.tsx, demos.tsx, guidance.ts or guide.ts
    kit/        page building blocks: sections, examples, anatomy, states
    site/       sidebar, header, breadcrumbs, on this page
    agent/      the MCP tools, the code checker, the llms.txt text
    sample/     network.ts, the sample network every example uses
scripts/        design-sync, adoption, and the token, checker and MCP tests