Simplify JSON structure: use direct array instead of 'buttons' wrapper

Agent-Logs-Url: https://github.com/tinypluginlabs/demo/sessions/f3fe6d1f-4ee6-4520-9e56-05dbd970585f

Co-authored-by: ideag <3252474+ideag@users.noreply.github.com>

Author: Copilot

BLUEPRINT_JSON_STRUCTURE.md

@@ -5,30 +5,29 @@ This document provides the structure definition for `/blueprints/blueprints.json
 
 ## JSON Structure
 
+The JSON file is a direct array of button configuration objects:
+
 ```json
-{
-  "buttons": [
-    {
-      "id": "string",
-      "title": "string",
-      "path": "string",
-      "icon": "string",
-      "disabled": false
-    }
-  ]
-}
+[
+  {
+    "id": "string",
+    "title": "string",
+    "path": "string",
+    "icon": "string",
+    "disabled": false
+  }
+]
 ```
 
 ## Field Definitions
 
 | Field | Type | Required | Description |
 |-------|------|----------|-------------|
-| `buttons` | Array | Yes | Array of button configuration objects |
-| `buttons[].id` | String | Yes | Unique identifier for the button (used as React key) |
-| `buttons[].title` | String | Yes | Display text shown under the button icon |
-| `buttons[].path` | String | Yes | Navigation path (e.g., "/tinyrelated") |
-| `buttons[].icon` | String | No | Icon to display (React component name or SVG URL, default: "WordPressIcon") |
-| `buttons[].disabled` | Boolean | No | Whether the button is disabled (default: false) |
+| `[].id` | String | Yes | Unique identifier for the button (used as React key) |
+| `[].title` | String | Yes | Display text shown under the button icon |
+| `[].path` | String | Yes | Navigation path (e.g., "/tinyrelated") |
+| `[].icon` | String | No | Icon to display (React component name or SVG URL, default: "WordPressIcon") |
+| `[].disabled` | Boolean | No | Whether the button is disabled (default: false) |
 
 ## Icon Configuration
 
@@ -51,30 +50,28 @@ If the `icon` field is omitted or an invalid component name is provided, the but
 ## Example Configuration
 
 ```json
-{
-  "buttons": [
-    {
-      "id": "tinyrelated",
-      "title": "tinyRelated",
-      "path": "/tinyrelated",
-      "icon": "WordPressIcon",
-      "disabled": false
-    },
-    {
-      "id": "tinyrating",
-      "title": "tinyRating",
-      "path": "/tinyrating",
-      "icon": "https://example.com/rating-icon.svg",
-      "disabled": false
-    },
-    {
-      "id": "tinyevent",
-      "title": "tinyEvent",
-      "path": "/tinyevent",
-      "disabled": false
-    }
-  ]
-}
+[
+  {
+    "id": "tinyrelated",
+    "title": "tinyRelated",
+    "path": "/tinyrelated",
+    "icon": "WordPressIcon",
+    "disabled": false
+  },
+  {
+    "id": "tinyrating",
+    "title": "tinyRating",
+    "path": "/tinyrating",
+    "icon": "https://example.com/rating-icon.svg",
+    "disabled": false
+  },
+  {
+    "id": "tinyevent",
+    "title": "tinyEvent",
+    "path": "/tinyevent",
+    "disabled": false
+  }
+]
 ```
 
 ## File Location

IMPLEMENTATION_SUMMARY.md

@@ -19,9 +19,7 @@ export interface BlueprintButton {
   disabled?: boolean;      // Optional: button disabled state
 }
 
-export interface BlueprintsConfig {
-  buttons: BlueprintButton[];
-}
+export type BlueprintsConfig = BlueprintButton[];
 ```
 
 ### 2. Component Updates
@@ -56,14 +54,14 @@ function resolveIcon(iconSpec?: string): React.ReactNode {
   return <WordPressIcon />;
 }
 
-// Fetch from JSON
+// Fetch from JSON (direct array)
 const { data: blueprintsConfig } = useFetch<BlueprintsConfig>(
   '/blueprints/blueprints.json'
 );
 
 // Fallback to defaults
 const defaultCreationOptions: BlueprintButton[] = [...];
-const buttonsConfig = blueprintsConfig?.buttons || defaultCreationOptions;
+const buttonsConfig = blueprintsConfig || defaultCreationOptions;
 
 // Transform to button props with dynamic icon resolution
 const creationOptions = buttonsConfig.map((button) => ({
@@ -87,17 +85,16 @@ Comprehensive documentation explaining:
 
 ## JSON File Structure
 
-The CI process should deploy a `blueprints.json` file to `/blueprints/blueprints.json` with the following structure:
+The CI process should deploy a `blueprints.json` file to `/blueprints/blueprints.json` as a direct array:
 
 ```json
-{
-  "buttons": [
-    {
-      "id": "tinyrelated",
-      "title": "tinyRelated",
-      "path": "/tinyrelated",
-      "disabled": false
-    },
+[
+  {
+    "id": "tinyrelated",
+    "title": "tinyRelated",
+    "path": "/tinyrelated",
+    "disabled": false
+  },
     {
       "id": "tinyrating",
       "title": "tinyRating",
@@ -110,8 +107,7 @@ The CI process should deploy a `blueprints.json` file to `/blueprints/blueprints
       "path": "/tinyevent",
       "disabled": false
     }
-  ]
-}
+]
 ```
 
 ## Behavior

packages/playground/website/src/components/saved-playgrounds-overlay/index.tsx

@@ -148,7 +148,7 @@ export function SavedPlaygroundsOverlay({
 	];
 
 	// Use fetched config if available, otherwise use defaults
-	const buttonsConfig = blueprintsConfig?.buttons || defaultCreationOptions;
+	const buttonsConfig = blueprintsConfig || defaultCreationOptions;
 
 	// Transform button configs into creation options with onClick handlers
 	const creationOptions = buttonsConfig.map((button) => ({

packages/playground/website/src/lib/types/blueprints-config.ts

@@ -5,25 +5,23 @@
  * to /blueprints/blueprints.json for configuring the "Start a new Playground"
  * overlay buttons.
  *
- * Example JSON structure:
- * {
- *   "buttons": [
- *     {
- *       "id": "tinyrelated",
- *       "title": "tinyRelated",
- *       "path": "/tinyrelated",
- *       "icon": "WordPressIcon",
- *       "disabled": false
- *     },
- *     {
- *       "id": "tinyrating",
- *       "title": "tinyRating",
- *       "path": "/tinyrating",
- *       "icon": "https://example.com/icon.svg",
- *       "disabled": false
- *     }
- *   ]
- * }
+ * Example JSON structure (array of button objects):
+ * [
+ *   {
+ *     "id": "tinyrelated",
+ *     "title": "tinyRelated",
+ *     "path": "/tinyrelated",
+ *     "icon": "WordPressIcon",
+ *     "disabled": false
+ *   },
+ *   {
+ *     "id": "tinyrating",
+ *     "title": "tinyRating",
+ *     "path": "/tinyrating",
+ *     "icon": "https://example.com/icon.svg",
+ *     "disabled": false
+ *   }
+ * ]
  */
 
 /**
@@ -62,11 +60,7 @@ export interface BlueprintButton {
 }
 
 /**
- * Root configuration object for blueprints.json
+ * Root configuration type for blueprints.json
+ * The JSON file should be a direct array of BlueprintButton objects
  */
-export interface BlueprintsConfig {
-	/**
-	 * Array of button configurations
-	 */
-	buttons: BlueprintButton[];
-}
+export type BlueprintsConfig = BlueprintButton[];