Add alpha export with Backstage new frontend system

Implements #6421 - adds `/alpha` export path that uses Backstage's new
declarative frontend system while maintaining backward compatibility with
the existing legacy export.

Changes:
- Add `@backstage/frontend-plugin-api` dependency
- Create `src/alpha.ts` with new frontend system plugin using:
  - EntityContentBlueprint for FlagsTab
  - EntityCardBlueprint for FlagsmithOverviewCard and FlagsmithUsageCard
- Add exports and typesVersions configuration to package.json

Usage:
- Legacy: `import { flagsmithPlugin } from '@internal/plugin-flagsmith'`
- Alpha: `import flagsmithPlugin from '@internal/plugin-flagsmith/alpha'`

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: talissoncosta

package.json

@@ -33,9 +33,20 @@
       "backstage-cli package lint --fix"
     ]
   },
+  "exports": {
+    ".": "./src/index.ts",
+    "./alpha": "./src/alpha.ts",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "alpha": ["src/alpha.ts"]
+    }
+  },
   "dependencies": {
     "@backstage/core-components": "^0.18.2",
     "@backstage/core-plugin-api": "^1.11.1",
+    "@backstage/frontend-plugin-api": "^0.13.2",
     "@backstage/plugin-catalog-react": "^1.13.3",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",

src/alpha.ts

@@ -0,0 +1,68 @@
+import { createElement } from 'react';
+import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import {
+  EntityContentBlueprint,
+  EntityCardBlueprint,
+} from '@backstage/plugin-catalog-react/alpha';
+
+/**
+ * Entity content (tab) for FlagsTab - displays feature flags for an entity
+ * Requires annotation: flagsmith.com/project-id
+ */
+const flagsTabContent = EntityContentBlueprint.make({
+  name: 'flags',
+  params: {
+    path: '/flagsmith',
+    title: 'Feature Flags',
+    filter: 'has:annotation:flagsmith.com/project-id',
+    loader: () =>
+      import('./components/FlagsTab').then(m => createElement(m.FlagsTab)),
+  },
+});
+
+/**
+ * Entity card for FlagsmithOverviewCard - shows flag overview in entity page
+ * Requires annotation: flagsmith.com/project-id
+ */
+const overviewCard = EntityCardBlueprint.make({
+  name: 'overview',
+  params: {
+    filter: 'has:annotation:flagsmith.com/project-id',
+    loader: () =>
+      import('./components/FlagsmithOverviewCard').then(m =>
+        createElement(m.FlagsmithOverviewCard),
+      ),
+  },
+});
+
+/**
+ * Entity card for FlagsmithUsageCard - shows 30-day usage analytics
+ * Requires annotations: flagsmith.com/project-id, flagsmith.com/org-id
+ */
+const usageCard = EntityCardBlueprint.make({
+  name: 'usage',
+  params: {
+    filter: 'has:annotation:flagsmith.com/project-id,flagsmith.com/org-id',
+    loader: () =>
+      import('./components/FlagsmithUsageCard').then(m =>
+        createElement(m.FlagsmithUsageCard),
+      ),
+  },
+});
+
+/**
+ * Flagsmith plugin for Backstage's new frontend system.
+ *
+ * This is the alpha export of the Flagsmith plugin, implementing
+ * the new declarative frontend system. It provides:
+ *
+ * - Entity content tab showing feature flags
+ * - Overview card for entity pages
+ * - Usage analytics card
+ *
+ * @alpha
+ */
+export default createFrontendPlugin({
+  pluginId: 'flagsmith',
+  extensions: [flagsTabContent, overviewCard, usageCard],
+});