@marlinjai/clearify 1.7.2 → 1.8.0

package/dist/node/{chunk-HEKR5KM2.js → chunk-3WWPYCGQ.js}

@@ -4,8 +4,9 @@ import {
 import {
   loadUserConfig,
   resolveConfig,
-  resolveSections
-} from "./chunk-WTT3TFBP.js";
+  resolveSections,
+  scanHubProjects
+} from "./chunk-YMRRZEYA.js";
 import {
   buildSectionData
 } from "./chunk-6PUBRHS7.js";
@@ -26,6 +27,8 @@ var VIRTUAL_MERMAID_SVGS = "virtual:clearify/mermaid-svgs";
 var RESOLVED_VIRTUAL_MERMAID_SVGS = "\0" + VIRTUAL_MERMAID_SVGS;
 var VIRTUAL_OPENAPI_SPEC = "virtual:clearify/openapi-spec";
 var RESOLVED_VIRTUAL_OPENAPI_SPEC = "\0" + VIRTUAL_OPENAPI_SPEC;
+var VIRTUAL_HUB = "virtual:clearify/hub";
+var RESOLVED_VIRTUAL_HUB = "\0" + VIRTUAL_HUB;
 function findFirstNavPath(items) {
   for (const item of items) {
     if (item.path) return item.path;
@@ -218,6 +221,7 @@ ${routeEntries.join(",\n")}
       userRoot = options.root ?? process.cwd();
       const userConfig = await loadUserConfig(userRoot);
       config = resolveConfig(userConfig, userRoot);
+      config = await scanHubProjects(config, userRoot);
       const allSections = resolveSections(config, userRoot);
       const isDev = resolvedViteConfig.command === "serve";
       visibleSections = isDev ? allSections : allSections.filter((s) => !s.draft);
@@ -230,6 +234,7 @@ ${routeEntries.join(",\n")}
       if (id === VIRTUAL_SEARCH_INDEX) return RESOLVED_VIRTUAL_SEARCH_INDEX;
       if (id === VIRTUAL_MERMAID_SVGS) return RESOLVED_VIRTUAL_MERMAID_SVGS;
       if (id === VIRTUAL_OPENAPI_SPEC) return RESOLVED_VIRTUAL_OPENAPI_SPEC;
+      if (id === VIRTUAL_HUB) return RESOLVED_VIRTUAL_HUB;
       return null;
     },
     async load(id) {
@@ -251,6 +256,10 @@ ${routeEntries.join(",\n")}
       if (id === RESOLVED_VIRTUAL_OPENAPI_SPEC) {
         return await loadOpenAPISpec();
       }
+      if (id === RESOLVED_VIRTUAL_HUB) {
+        const hubData = config.hub ?? null;
+        return `export default ${JSON.stringify(hubData)};`;
+      }
       return null;
     },
     configureServer(server) {

package/dist/node/{chunk-DTMKLAIC.js → chunk-4BOXMNVR.js}

@@ -2,7 +2,7 @@ import {
   loadUserConfig,
   resolveConfig,
   resolveSections
-} from "./chunk-WTT3TFBP.js";
+} from "./chunk-YMRRZEYA.js";
 import {
   scanDocs
 } from "./chunk-6PUBRHS7.js";

package/dist/node/{chunk-MWUXPDQK.js → chunk-QIAMD2Q6.js}

@@ -210,6 +210,30 @@ export default defineConfig({
   } else {
     console.log("  clearify.config.ts already exists, skipping");
   }
+  if (!options.noClaudeRules) {
+    const claudeRulesDir = resolve(cwd, ".claude/rules");
+    const claudeRulesPath = resolve(claudeRulesDir, "clearify-docs.md");
+    if (!existsSync(claudeRulesPath)) {
+      mkdirSync(claudeRulesDir, { recursive: true });
+      const hasInternal = !options.noInternal;
+      const rulesContent = `# Clearify Documentation Rules
+
+When making changes to this project, keep the documentation in sync:
+
+1. **Changelog** \u2014 After any user-facing change, add a bullet under \`## [Unreleased]\` in \`CHANGELOG.md\` using [Keep a Changelog](https://keepachangelog.com/) format (\`Added\`, \`Changed\`, \`Fixed\`, \`Removed\`).
+
+2. **Docs pages** \u2014 When a feature or behavior changes, update the relevant page in \`docs/public/\`. If a new feature has no page, create one.
+
+3. **Config docs** \u2014 When config options are added or changed, update \`docs/public/configuration.md\` with the new option, type, default, and description.
+${hasInternal ? `
+4. **Architecture decisions** \u2014 For significant design decisions, add an entry to \`docs/internal/\` explaining the context, decision, and trade-offs.
+` : ""}`;
+      writeFileSync(claudeRulesPath, rulesContent);
+      console.log("  Created .claude/rules/clearify-docs.md");
+    } else {
+      console.log("  .claude/rules/clearify-docs.md already exists, skipping");
+    }
+  }
   console.log(`
   Done! Next steps:
 

package/dist/node/{chunk-T4E54OYU.js → chunk-W3MZOFJQ.js}

@@ -8,12 +8,12 @@ import {
 } from "./chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "./chunk-HEKR5KM2.js";
+} from "./chunk-3WWPYCGQ.js";
 import {
   loadUserConfig,
   resolveConfig,
   resolveSections
-} from "./chunk-WTT3TFBP.js";
+} from "./chunk-YMRRZEYA.js";
 import {
   buildSectionData
 } from "./chunk-6PUBRHS7.js";

package/dist/node/{chunk-WTT3TFBP.js → chunk-YMRRZEYA.js}

@@ -1,6 +1,6 @@
 // src/core/config.ts
 import { z } from "zod";
-import { resolve, basename } from "path";
+import { resolve, basename, dirname } from "path";
 import { pathToFileURL } from "url";
 import { existsSync, readFileSync, rmSync } from "fs";
 import { tmpdir } from "os";
@@ -31,6 +31,27 @@ var OpenAPIConfigSchema = z.object({
   basePath: z.string().default("/api"),
   generatePages: z.boolean().default(true)
 }).optional();
+var HubProjectSchema = z.object({
+  name: z.string(),
+  description: z.string(),
+  href: z.string().optional(),
+  repo: z.string().optional(),
+  status: z.enum(["active", "beta", "planned", "deprecated"]).default("active"),
+  icon: z.string().optional(),
+  tags: z.array(z.string()).optional()
+});
+var HubProjectPartialSchema = z.object({
+  description: z.string(),
+  href: z.string().optional(),
+  repo: z.string().optional(),
+  status: z.enum(["active", "beta", "planned", "deprecated"]).default("active"),
+  icon: z.string().optional(),
+  tags: z.array(z.string()).optional()
+}).optional();
+var HubConfigSchema = z.object({
+  projects: z.array(HubProjectSchema).default([]),
+  scan: z.string().optional()
+}).optional();
 var ClearifyConfigSchema = z.object({
   name: z.string().default("Documentation"),
   docsDir: z.string().default("./docs"),
@@ -51,6 +72,8 @@ var ClearifyConfigSchema = z.object({
   mermaid: MermaidConfigSchema,
   openapi: OpenAPIConfigSchema,
   links: z.record(z.string(), z.string()).optional(),
+  hub: HubConfigSchema,
+  hubProject: HubProjectPartialSchema,
   customCss: z.string().optional(),
   headTags: z.array(z.string()).optional()
 });
@@ -98,7 +121,13 @@ async function loadTsConfig(configPath) {
         name: "externalize-except-clearify",
         setup(build2) {
           build2.onResolve({ filter: /^(clearify|@marlinjai\/clearify)$/ }, () => {
-            return { path: resolve(import.meta.dirname, "..", "types", "index.js") };
+            return { path: "clearify-stub", namespace: "clearify-stub" };
+          });
+          build2.onLoad({ filter: /.*/, namespace: "clearify-stub" }, () => {
+            return {
+              contents: "export function defineConfig(config) { return config; }",
+              loader: "js"
+            };
           });
           build2.onResolve({ filter: /.*/ }, (args) => {
             if (args.path.startsWith(".") || args.path.startsWith("/")) {
@@ -188,10 +217,48 @@ function resolveSections(config, root) {
     }
   ];
 }
+async function scanHubProjects(config, root) {
+  if (!config.hub?.scan) return config;
+  const { globbySync } = await import("globby");
+  const pattern = config.hub.scan;
+  const configPaths = globbySync(pattern, { cwd: root, absolute: true });
+  const scannedProjects = [];
+  for (const configPath of configPaths) {
+    try {
+      const childConfig = await loadUserConfig(dirname(configPath));
+      if (!childConfig.hubProject) continue;
+      const name = childConfig.name ?? basename(dirname(configPath));
+      const hp = childConfig.hubProject;
+      scannedProjects.push({
+        name,
+        description: hp.description,
+        href: hp.href ?? childConfig.siteUrl,
+        repo: hp.repo,
+        status: hp.status,
+        icon: hp.icon,
+        tags: hp.tags
+      });
+    } catch {
+    }
+  }
+  const manualNames = new Set((config.hub.projects ?? []).map((p) => p.name));
+  const merged = [
+    ...scannedProjects.filter((p) => !manualNames.has(p.name)),
+    ...config.hub.projects ?? []
+  ];
+  return {
+    ...config,
+    hub: {
+      ...config.hub,
+      projects: merged
+    }
+  };
+}
 
 export {
   defaultConfig,
   loadUserConfig,
   resolveConfig,
-  resolveSections
+  resolveSections,
+  scanHubProjects
 };

package/dist/node/cli/index.js

@@ -18,9 +18,9 @@ cli.command("build", "Build static documentation site").action(async () => {
   const { build } = await import("../node/index.js");
   await build();
 });
-cli.command("init", "Scaffold a docs folder").option("--no-internal", "Skip creating the internal docs section").action(async (options) => {
+cli.command("init", "Scaffold a docs folder").option("--no-internal", "Skip creating the internal docs section").option("--no-claude-rules", "Skip creating .claude/rules/clearify-docs.md").action(async (options) => {
   const { init } = await import("../node/index.js");
-  await init({ noInternal: options.noInternal });
+  await init({ noInternal: options.noInternal, noClaudeRules: options.noClaudeRules });
 });
 cli.command("check", "Check for broken internal links").action(async () => {
   const { checkLinks } = await import("../node/check.js");
@@ -37,5 +37,5 @@ cli.command("openapi:generate", "Generate OpenAPI spec from NestJS app").option(
   });
 });
 cli.help();
-cli.version("1.5.1");
+cli.version("1.8.0");
 cli.parse();

package/dist/node/core/config.d.ts

@@ -5,5 +5,6 @@ declare const defaultConfig: ClearifyConfig;
 declare function loadUserConfig(root: string): Promise<Partial<ClearifyConfig>>;
 declare function resolveConfig(userConfig?: Partial<ClearifyConfig>, root?: string): ClearifyConfig;
 declare function resolveSections(config: ClearifyConfig, root: string): ResolvedSection[];
+declare function scanHubProjects(config: ClearifyConfig, root: string): Promise<ClearifyConfig>;
 
-export { defaultConfig, loadUserConfig, resolveConfig, resolveSections };
+export { defaultConfig, loadUserConfig, resolveConfig, resolveSections, scanHubProjects };

package/dist/node/core/config.js

@@ -2,8 +2,9 @@ import {
   defaultConfig,
   loadUserConfig,
   resolveConfig,
-  resolveSections
-} from "../chunk-WTT3TFBP.js";
+  resolveSections,
+  scanHubProjects
+} from "../chunk-YMRRZEYA.js";
 import {
   defineConfig
 } from "../chunk-V7LLYIRO.js";
@@ -12,5 +13,6 @@ export {
   defineConfig,
   loadUserConfig,
   resolveConfig,
-  resolveSections
+  resolveSections,
+  scanHubProjects
 };

package/dist/node/node/build.js

@@ -1,11 +1,11 @@
 import {
   buildSite
-} from "../chunk-T4E54OYU.js";
+} from "../chunk-W3MZOFJQ.js";
 import "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
-import "../chunk-HEKR5KM2.js";
+import "../chunk-3WWPYCGQ.js";
 import "../chunk-B2Q23JW3.js";
-import "../chunk-WTT3TFBP.js";
+import "../chunk-YMRRZEYA.js";
 import "../chunk-V7LLYIRO.js";
 import "../chunk-6PUBRHS7.js";
 import "../chunk-5TD7NQIW.js";

package/dist/node/node/check.js

@@ -1,7 +1,7 @@
 import {
   checkLinks
-} from "../chunk-DTMKLAIC.js";
-import "../chunk-WTT3TFBP.js";
+} from "../chunk-4BOXMNVR.js";
+import "../chunk-YMRRZEYA.js";
 import "../chunk-V7LLYIRO.js";
 import "../chunk-6PUBRHS7.js";
 import "../chunk-5TD7NQIW.js";

package/dist/node/node/index.js

@@ -1,24 +1,24 @@
 import {
   buildSite
-} from "../chunk-T4E54OYU.js";
+} from "../chunk-W3MZOFJQ.js";
 import {
   remarkMermaidToComponent
 } from "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "../chunk-HEKR5KM2.js";
+} from "../chunk-3WWPYCGQ.js";
 import "../chunk-B2Q23JW3.js";
 import {
   init
-} from "../chunk-MWUXPDQK.js";
+} from "../chunk-QIAMD2Q6.js";
 import {
   checkLinks
-} from "../chunk-DTMKLAIC.js";
+} from "../chunk-4BOXMNVR.js";
 import {
   loadUserConfig,
   resolveConfig
-} from "../chunk-WTT3TFBP.js";
+} from "../chunk-YMRRZEYA.js";
 import "../chunk-V7LLYIRO.js";
 import "../chunk-6PUBRHS7.js";
 import "../chunk-5TD7NQIW.js";

package/dist/node/node/init.d.ts

@@ -1,5 +1,6 @@
 interface InitOptions {
     noInternal?: boolean;
+    noClaudeRules?: boolean;
 }
 declare function init(options?: InitOptions): Promise<void>;
 

package/dist/node/node/init.js

@@ -1,6 +1,6 @@
 import {
   init
-} from "../chunk-MWUXPDQK.js";
+} from "../chunk-QIAMD2Q6.js";
 export {
   init
 };

package/dist/node/types/index.d.ts

@@ -50,6 +50,8 @@ interface ClearifyConfig {
         github?: string;
         [key: string]: string | undefined;
     };
+    hub?: HubConfig;
+    hubProject?: Omit<HubProject, 'name'>;
     customCss?: string;
     headTags?: string[];
 }
@@ -75,6 +77,19 @@ interface RouteEntry {
     componentPath?: string;
     redirectTo?: string;
 }
+interface HubProject {
+    name: string;
+    description: string;
+    href?: string;
+    repo?: string;
+    status?: 'active' | 'beta' | 'planned' | 'deprecated';
+    icon?: string;
+    tags?: string[];
+}
+interface HubConfig {
+    projects: HubProject[];
+    scan?: string;
+}
 declare function defineConfig(config: Partial<ClearifyConfig>): Partial<ClearifyConfig>;
 
-export { type ClearifyConfig, type NavigationItem, type PageFrontmatter, type ResolvedSection, type RouteEntry, type SectionConfig, type SectionNavigation, defineConfig };
+export { type ClearifyConfig, type HubConfig, type HubProject, type NavigationItem, type PageFrontmatter, type ResolvedSection, type RouteEntry, type SectionConfig, type SectionNavigation, defineConfig };

package/dist/node/vite-plugin/index.js

@@ -1,8 +1,8 @@
 import {
   clearifyPlugin
-} from "../chunk-HEKR5KM2.js";
+} from "../chunk-3WWPYCGQ.js";
 import "../chunk-B2Q23JW3.js";
-import "../chunk-WTT3TFBP.js";
+import "../chunk-YMRRZEYA.js";
 import "../chunk-V7LLYIRO.js";
 import "../chunk-6PUBRHS7.js";
 import "../chunk-5TD7NQIW.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marlinjai/clearify",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "An open-source documentation site generator. Turn markdown into beautiful docs.",
   "type": "module",
   "bin": {
@@ -22,10 +22,6 @@
     "src/client",
     "src/theme"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev:self": "node bin/clearify.js dev"
-  },
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
@@ -92,5 +88,9 @@
     "react",
     "mermaid",
     "openapi"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev:self": "node bin/clearify.js dev"
+  }
+}

package/src/theme/MDXComponents.tsx

@@ -13,6 +13,9 @@ import { Badge } from './components/Badge.js';
 import { Tooltip } from './components/Tooltip.js';
 import { Columns, Column } from './components/Columns.js';
 import { Frame } from './components/Frame.js';
+import { StatusBadge } from './components/StatusBadge.js';
+import { ProjectCard } from './components/ProjectCard.js';
+import { ProjectGrid } from './components/ProjectGrid.js';
 import { CodeBlock } from './CodeBlock.js';
 
 export const mdxComponents = {
@@ -35,6 +38,9 @@ export const mdxComponents = {
   Columns,
   Column,
   Frame,
+  StatusBadge,
+  ProjectCard,
+  ProjectGrid,
   // Override default pre element with CodeBlock
   pre: (props: React.HTMLAttributes<HTMLPreElement>) => <CodeBlock {...props} />,
 };

package/src/theme/components/ProjectCard.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { StatusBadge } from './StatusBadge.js';
+
+interface ProjectCardProps {
+  name: string;
+  description: string;
+  href?: string;
+  repo?: string;
+  status?: 'active' | 'beta' | 'planned' | 'deprecated';
+  icon?: string;
+  tags?: string[];
+  children?: React.ReactNode;
+}
+
+export function ProjectCard({ name, description, href, repo, status, icon, tags, children }: ProjectCardProps) {
+  const content = (
+    <div
+      style={{
+        border: '1px solid var(--clearify-border)',
+        borderRadius: 'var(--clearify-radius-lg)',
+        padding: '1.375rem',
+        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        cursor: href ? 'pointer' : 'default',
+        height: '100%',
+        background: 'var(--clearify-bg)',
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column' as const,
+      }}
+      className="clearify-project-card"
+    >
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.625rem' }}>
+        {icon && (
+          <div
+            style={{
+              fontSize: '1.25rem',
+              width: 36,
+              height: 36,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 'var(--clearify-radius-sm)',
+              background: 'var(--clearify-gradient-subtle)',
+              border: '1px solid var(--clearify-border)',
+              flexShrink: 0,
+            }}
+          >
+            {icon}
+          </div>
+        )}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+          {status && <StatusBadge status={status} />}
+          {repo && (
+            <a
+              href={repo}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              style={{
+                color: 'var(--clearify-text-secondary)',
+                display: 'inline-flex',
+                alignItems: 'center',
+                transition: 'color 0.15s',
+              }}
+              className="clearify-project-card-repo"
+              title="View repository"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+              </svg>
+            </a>
+          )}
+        </div>
+      </div>
+
+      <div style={{ fontWeight: 600, marginBottom: '0.25rem', fontSize: '0.9375rem', letterSpacing: '-0.01em' }}>
+        {name}
+      </div>
+      <div style={{ fontSize: '0.8125rem', color: 'var(--clearify-text-secondary)', lineHeight: 1.55, flex: 1 }}>
+        {description}
+      </div>
+
+      {children && <div style={{ marginTop: '0.625rem', fontSize: '0.8125rem' }}>{children}</div>}
+
+      {tags && tags.length > 0 && (
+        <div style={{ display: 'flex', flexWrap: 'wrap' as const, gap: '0.375rem', marginTop: '0.75rem' }}>
+          {tags.map((tag) => (
+            <span
+              key={tag}
+              style={{
+                display: 'inline-block',
+                padding: '0.0625rem 0.4375rem',
+                borderRadius: '9999px',
+                fontSize: '0.6875rem',
+                fontWeight: 500,
+                background: 'rgba(107, 114, 128, 0.08)',
+                color: 'var(--clearify-text-secondary)',
+                fontFamily: 'var(--font-sans)',
+              }}
+              className="clearify-project-card-tag"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        .clearify-project-card:hover {
+          border-color: var(--clearify-border-strong) !important;
+          box-shadow: var(--clearify-shadow) !important;
+          transform: translateY(-1px);
+        }
+        .clearify-project-card-repo:hover {
+          color: var(--clearify-text) !important;
+        }
+        .dark .clearify-project-card-tag {
+          background: rgba(107, 114, 128, 0.15) !important;
+        }
+      `}</style>
+    </div>
+  );
+
+  if (href) {
+    if (href.startsWith('/')) {
+      return <Link to={href} style={{ textDecoration: 'none', color: 'inherit' }}>{content}</Link>;
+    }
+    return <a href={href} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: 'inherit' }}>{content}</a>;
+  }
+
+  return content;
+}

package/src/theme/components/ProjectGrid.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import hub from 'virtual:clearify/hub';
+import { ProjectCard } from './ProjectCard.js';
+
+interface ProjectGridProps {
+  cols?: number;
+  children?: React.ReactNode;
+}
+
+export function ProjectGrid({ cols = 3, children }: ProjectGridProps) {
+  const hasChildren = React.Children.count(children) > 0;
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gap: '0.875rem',
+        marginBottom: '1.5rem',
+      }}
+      className="clearify-project-grid"
+    >
+      {hasChildren
+        ? children
+        : hub?.projects.map((project) => (
+            <ProjectCard
+              key={project.name}
+              name={project.name}
+              description={project.description}
+              href={project.href}
+              repo={project.repo}
+              status={project.status}
+              icon={project.icon}
+              tags={project.tags}
+            />
+          ))}
+
+      <style>{`
+        @media (max-width: 900px) {
+          .clearify-project-grid {
+            grid-template-columns: repeat(2, 1fr) !important;
+          }
+        }
+        @media (max-width: 640px) {
+          .clearify-project-grid {
+            grid-template-columns: 1fr !important;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/theme/components/StatusBadge.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+const statusStyles = {
+  active: {
+    bg: 'rgba(34, 197, 94, 0.08)',
+    bgDark: 'rgba(34, 197, 94, 0.15)',
+    color: '#16a34a',
+    colorDark: '#4ade80',
+    label: 'Active',
+  },
+  beta: {
+    bg: 'rgba(99, 102, 241, 0.08)',
+    bgDark: 'rgba(99, 102, 241, 0.15)',
+    color: '#6366f1',
+    colorDark: '#818cf8',
+    label: 'Beta',
+  },
+  planned: {
+    bg: 'rgba(245, 158, 11, 0.08)',
+    bgDark: 'rgba(245, 158, 11, 0.15)',
+    color: '#d97706',
+    colorDark: '#fbbf24',
+    label: 'Planned',
+  },
+  deprecated: {
+    bg: 'rgba(239, 68, 68, 0.08)',
+    bgDark: 'rgba(239, 68, 68, 0.15)',
+    color: '#dc2626',
+    colorDark: '#f87171',
+    label: 'Deprecated',
+  },
+};
+
+interface StatusBadgeProps {
+  status: 'active' | 'beta' | 'planned' | 'deprecated';
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  const s = statusStyles[status];
+  const badgeClass = `clearify-status-badge-${status}`;
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '0.125rem 0.5rem',
+        borderRadius: '9999px',
+        fontSize: '0.6875rem',
+        fontWeight: 500,
+        lineHeight: 1.5,
+        backgroundColor: s.bg,
+        color: s.color,
+        fontFamily: 'var(--font-sans)',
+        whiteSpace: 'nowrap',
+        letterSpacing: '0.01em',
+      }}
+      className={badgeClass}
+    >
+      {s.label}
+
+      <style>{`
+        .dark .${badgeClass} {
+          background-color: ${s.bgDark} !important;
+          color: ${s.colorDark} !important;
+        }
+      `}</style>
+    </span>
+  );
+}

package/src/theme/components/index.ts

@@ -12,3 +12,6 @@ export { Badge } from './Badge.js';
 export { Tooltip } from './Tooltip.js';
 export { Columns, Column } from './Columns.js';
 export { Frame } from './Frame.js';
+export { StatusBadge } from './StatusBadge.js';
+export { ProjectCard } from './ProjectCard.js';
+export { ProjectGrid } from './ProjectGrid.js';