@wix/agent-skills 1.0.0

package/skills/wix-app/references/DASHBOARD_PAGE.md

@@ -0,0 +1,403 @@
+
+# Wix Dashboard Page Builder
+
+Creates full-featured dashboard page extensions for Wix CLI applications. Dashboard pages appear in the Wix site owner's dashboard and enable site administrators to manage data, configure settings, and perform administrative tasks.
+
+
+## Quick Start Checklist
+
+Follow these steps in order when creating a dashboard page:
+
+1. [ ] Create page folder: `src/extensions/dashboard/pages/<page-name>/`
+2. [ ] Create `page.tsx` with WDS components wrapped in `WixDesignSystemProvider`
+3. [ ] Create `extensions.ts` with `extensions.dashboardPage()` and unique UUID
+4. [ ] Update `src/extensions.ts` to import and use the new extension
+
+## Capabilities
+
+### Data Operations (Wix Data SDK)
+
+See [Wix Data Reference](data-collection/WIX_DATA.md) in the Data Collection reference for complete documentation.
+
+**Summary:**
+
+- Read: `items.query('Collection').filter/sort.limit.find()` → `{ items, totalCount, hasNext }`
+- Write: `items.insert | update | remove`. Ensure collection permissions allow the action
+
+**Query methods:** `eq`, `ne`, `gt`, `ge`, `lt`, `le`, `between`, `contains`, `startsWith`, `endsWith`, `hasSome`, `hasAll`, `isEmpty`, `isNotEmpty`, `and`, `or`, `not`, `ascending`, `descending`, `limit`, `skip`, `include`
+
+### Dashboard APIs
+
+See [Dashboard API Reference](dashboard-page/DASHBOARD_API.md) for complete documentation including all methods, page IDs, and examples.
+
+**Key methods:**
+
+- `dashboard.navigate()` - Navigate between dashboard pages
+- `dashboard.observeState()` - Receive contextual state and environmental information
+- `dashboard.showToast()` - Display toast notifications
+- `dashboard.openModal()` - Open dashboard modal extensions (see [Dashboard Modal reference](DASHBOARD_MODAL.md))
+- `dashboard.navigateBack()` - Navigate back to previous page
+- `dashboard.getPageUrl()` - Get full URL for a dashboard page
+- `dashboard.openMediaManager()` - Open Wix Media Manager
+- `dashboard.onBeforeUnload()` - Register beforeunload handler
+- `dashboard.addSitePlugin()` - Add site plugin to slots
+- `dashboard.setPageTitle()` - Set page title in browser tab
+- `dashboard.onLayerStateChange()` - Handle foreground/background state changes
+
+**CRITICAL: Using Modals in Dashboard Pages**
+
+When you need to display popup forms, confirmations, detail views, or any dialog overlays from a dashboard page, you **MUST** use dashboard modals, not regular React modals or WDS Modal components.
+
+- **Use dashboard modals** for: edit forms, delete confirmations, detail views, settings dialogs, any popup content
+- **Do NOT use** WDS `Modal` component or custom React modal implementations
+- **See [Dashboard Modal reference](DASHBOARD_MODAL.md)** for complete implementation guide
+
+Dashboard modals are opened using `dashboard.openModal()` and provide proper integration with the dashboard lifecycle, state management, and navigation.
+
+**Ecom Navigation:** See [Ecom Navigation Reference](dashboard-page/ECOM_NAVIGATION.md) for ecom-specific navigation helpers.
+
+### Embedded Script Configuration API
+
+When building a dashboard page to configure an embedded script, see [Dynamic Parameters Reference](dashboard-page/DYNAMIC_PARAMETERS.md) for complete implementation guide.
+
+**Key points:**
+
+- Use `embeddedScripts` from `@wix/app-management`
+- Parameters are returned as strings - handle type conversions when loading
+- All parameters must be saved as strings (convert booleans/numbers to strings)
+- Use `withProviders` wrapper when dynamic parameters are present
+
+## Files and Code Structure
+
+Dashboard pages live under `src/extensions/dashboard/pages`. Each page has its own folder.
+
+**File structure:**
+
+- `src/extensions/dashboard/pages/<page>/page.tsx` — page component
+
+**Key metadata fields:**
+
+- `id` (string, GUID): Unique page ID used to register the page
+- `title` (string): Used for browser tab and optional sidebar label
+- `additionalRoutes` (string[], optional): Extra routes leading to this page
+- `sidebar.disabled` (boolean, optional): Hide page from sidebar (default false)
+- `sidebar.priority` (number, optional): Sidebar ordering; lower is higher priority
+- `sidebar.whenActive.selectedPageId` (string, optional): Which page appears selected when this page is active
+- `sidebar.whenActive.hideSidebar` (boolean, optional): Hide sidebar when this page is active
+
+## WDS Provider Usage
+
+Wrap your dashboard page component with `WixDesignSystemProvider` to enable WDS components and theming. You must also import the global CSS styles for WDS components to render correctly.
+
+```typescript
+import { WixDesignSystemProvider } from "@wix/design-system";
+import '@wix/design-system/styles.global.css';
+
+export default function () {
+  return (
+    <WixDesignSystemProvider>
+      <Page>
+        <Page.Header
+          title="My Page"
+          subtitle="This is a subtitle for your page"
+        />
+        <Page.Content>
+          <EmptyState title="My Page" subtitle="Hello World!" theme="page" />
+        </Page.Content>
+      </Page>
+    </WixDesignSystemProvider>
+  );
+}
+```
+
+**Note:** When using dynamic parameters, use the `withProviders` wrapper instead. See [Dynamic Parameters](dashboard-page/DYNAMIC_PARAMETERS.md) for details.
+
+## Examples
+
+### Data Management Table
+
+**Request:** "Create a dashboard page to manage blog posts"
+
+**Output:** Page with table displaying posts, search toolbar, add/edit/delete actions, empty state.
+
+### Settings Form
+
+**Request:** "Build a settings page for notification preferences"
+
+**Output:** Page with form fields, save button with toast confirmation, unsaved changes warning.
+
+### Order Management
+
+**Request:** "Create an admin panel for customer orders"
+
+**Output:** Page with orders table, status badges, filters, detail dashboard modal (using [Dashboard Modal reference](DASHBOARD_MODAL.md)), status update actions.
+
+### Embedded Script Configuration
+
+**Request:** "Create a settings page for the coupon popup embedded script"
+
+**Output:** Page with form fields for popup headline, coupon code, minimum cart value, and enable toggle. Uses `embeddedScripts` API to load/save parameters.
+
+```typescript
+// Key pattern for embedded script configuration pages
+import { embeddedScripts } from "@wix/app-management";
+
+// Load on mount
+useEffect(() => {
+  const load = async () => {
+    const script = await embeddedScripts.getEmbeddedScript();
+    const data = script.parameters || {};
+    setOptions({
+      headline: data.headline || "Default",
+      enabled: data.enabled === "true",
+      threshold: Number(data.threshold) || 0,
+    });
+  };
+  load();
+}, []);
+
+// Save handler
+const handleSave = async () => {
+  await embeddedScripts.embedScript({
+    parameters: {
+      headline: options.headline,
+      enabled: String(options.enabled),
+      threshold: String(options.threshold),
+    },
+  });
+  dashboard.showToast({ message: "Saved!", type: "success" });
+};
+```
+
+## Extension Registration
+
+**Extension registration is MANDATORY and has TWO required steps.**
+
+### Step 1: Create Page-Specific Extension File
+
+Each dashboard page requires an `extensions.ts` file in its folder:
+
+**File:** `src/extensions/dashboard/pages/<page-name>/extensions.ts`
+
+```typescript
+import { extensions } from "@wix/astro/builders";
+
+export const dashboardpageMyPage = extensions.dashboardPage({
+  id: "{{GENERATE_UUID}}",
+  title: "My Page",
+  routePath: "my-page",
+  component: "./extensions/dashboard/pages/my-page/page.tsx",
+});
+```
+
+**CRITICAL: UUID Generation**
+
+The `id` must be a unique, static UUID v4 string. Generate a fresh UUID for each extension - do NOT use `randomUUID()` or copy UUIDs from examples. Replace `{{GENERATE_UUID}}` with a freshly generated UUID like `"a1b2c3d4-e5f6-7890-abcd-ef1234567890"`.
+
+| Property    | Type   | Description                                                                                          |
+| ----------- | ------ | ---------------------------------------------------------------------------------------------------- |
+| `id`        | string | Unique static UUID v4 (generate fresh - see note above)                                              |
+| `title`     | string | Display title in dashboard sidebar                                                                   |
+| `routePath` | string | URL path segment. Lowercase letters, numbers, dashes, and slashes only. Must NOT start with a slash. |
+| `component` | string | Relative path to the page component (.tsx)                                                           |
+
+### Step 2: Register in Main Extensions File
+
+**CRITICAL:** After creating the page-specific extension file, you MUST read [Extension Registration reference](EXTENSION_REGISTRATION.md) and follow the "App Registration" section to update `src/extensions.ts`.
+
+**Without completing Step 2, the dashboard page will not appear in the Wix dashboard.**
+
+## Common Mistakes - Do NOT
+
+**API confusion with other extension types:**
+
+| WRONG (Embedded Script API) | CORRECT (Dashboard Page API) |
+| --------------------------- | ---------------------------- |
+| `name: "..."`               | `title: "..."`               |
+| `source: "..."`             | `component: "..."`           |
+| `route: "..."`              | `routePath: "..."`           |
+
+Do NOT copy field names from embedded script or other extension registrations. Dashboard pages use `title`, `routePath`, and `component`.
+
+## API Spec Support
+
+When an API specification is provided, you can make API calls to those endpoints. See [API Spec Reference](dashboard-page/API_SPEC.md) for details on how to use API specs in dashboard pages.
+
+
+## Layout Guidelines
+
+Layout determines how users interact with your dashboard content. It establishes the structure, hierarchy, and rhythm of your dashboard page, contributing to the overall coherence and user experience. By making mindful and calculated choices in how you organize your content, users can move around more smoothly, saving time and frustration when completing tasks.
+
+### Design Principles
+
+To create dashboard pages optimized for user experience, follow these design principles:
+
+1. **Consistent:** Maintain repetitive layouts and content patterns for intuitive and easy-to-read pages.
+2. **Inclusive:** Create layouts and content that adapt well to various screen sizes.
+3. **Balanced:** Emphasize the priority of regions and content elements through deliberate management of size and white space.
+4. **Connected:** Minimize the distance between related regions or content elements to enhance cohesion and navigation.
+
+
+### Screen Size
+
+Dashboard pages are designed to accommodate various screen sizes rather than being tailored to one specific resolution. The primary content should be at the top of the page to ensure users immediately understand the purpose of the page.
+
+> **Note:** Content displayed in the top 600 pixels of the page will be visible for the majority of users.
+
+
+### Base Unit
+
+The base unit establishes the increment by which all elements and measurements are multiplied. This practice ensures consistency in the spacing and sizing of design elements.
+
+> **Note:** The design system is based on a 6px unit.
+
+The layout grid, spacing tokens, and nearly all visual elements and sizes adhere to multiples of six (6, 12, 18, 24, etc.), with only occasional exceptions.
+
+| TOKEN | SIZE | USE FOR |
+|-------|------|---------|
+| SP1 | 6px | Spacing between components |
+| SP2 | 12px | Spacing between components |
+| SP3 | 18px | Spacing between components |
+| SP4 | 24px | Spacing between components, layout spacing |
+| SP5 | 30px | Layout spacing |
+| SP6 | 36px | Layout spacing |
+| SP7 | 42px | Layout spacing |
+| SP8 | 48px | Layout spacing |
+| SP10 | 54px | Layout spacing |
+| SP11 | 60px | Layout spacing |
+
+
+### Layout Structure
+
+To best design the layout for your app, understand:
+
+1. The core frame of the app (Application frame)
+2. The placement and alignment of each segment within the grid layout (Grid layout)
+3. The content to appear in the grid (Common layouts)
+
+#### Application Frame
+
+The dashboard app frame is used by the majority of Wix applications settings. Dashboard pages consist of 4 areas:
+
+| AREA | USAGE |
+|------|-------|
+| 1. Global navigation (top bar) | General navigation at the top of a page which allows users to navigate between different environments. Full width container with a fixed height of 48px. |
+| 2. Sidebar navigation | Local navigation of an environment. Container with a fixed width of 228px. |
+| 3. Content area | Page content area with a width that's adaptive to screen size. |
+| 4. Side panel (optional) | An optional panel that shows additional actions or content associated with the content of a page. Fixed width of 420px. Can either overlay the main content area or push it from the right side. |
+
+**Side Panel Guidelines:**
+- Let the side panel overlay main content when it contains supplementary actions or settings, such as data filters
+- Push main content with the side panel when users must see the full context to continue
+
+
+#### Grid Layout
+
+The system uses a fluid grid layout with a fixed maximum width. It uses columns that scale and resize the content accordingly.
+
+The grid is constructed from 3 elements:
+- **Columns** - The design system uses a 12-column grid. Column width is fluid and changes according to the page width.
+- **Gutters** - The gaps between the columns. Gutter width has a fixed value of 24px.
+- **Margins** - By default, a page's content area has 48px side margins and a 48px bottom margin.
+
+**Grid Specifications:**
+- Minimum content area width: 864 pixels (each grid column is 50px wide)
+- Maximum content area width: 1248px (each column is 82px wide)
+- Wider screens maintain 1248px content width with side margins stretching to center content
+- Use 24px gap between cards both vertically and horizontally
+
+
+### Common Layouts
+
+Page layouts can be divided by intention into the following types:
+
+#### 1. Form Layouts
+
+Forms are pages that allow users to fill in data or edit existing data. Two variations:
+
+- **2/3 layout with optional sidebar (8/4 column split)** - Provides flexibility to expose primary and secondary content at the same time
+- **Full width (12 columns)** - Supports advanced product needs with complex structures
+
+Both form page layouts include mandatory **Save** and **Cancel** actions in the header and footer areas.
+
+**2/3 Layout Best Practices:**
+- Use to expose primary and secondary content at the same time
+- Keep the form easy to scan and comprehend
+- Display a live content preview on the side (widget can be sticky)
+- Use 8 columns for forms to keep text lines and input fields narrow for quicker reading
+- Bring actions closer to related titles (e.g., toggle switches near settings)
+
+**Full Width Layout Best Practices:**
+- Use when a form includes complex structures such as tables
+- Use for list items that contain many data columns
+
+**Combining Layouts:**
+- Avoid coast-to-coast inputs; keep inputs to 2/3 width of a card, or lay them out in two columns
+- Use white space on the right side for content preview
+- Use full width for tables with many columns and dividers that separate sections
+
+> **Note:** A column is easy to read if it is wide enough to accommodate an average of 10 words per line.
+
+#### 2. Display Layouts
+
+Display pages showcase data or content without accepting input from users. They can contain minor actions such as data filtering.
+
+**List (Table):**
+- Tables display large data sets and provide users with a quick overview
+- Use a 12-column layout for tables
+- Enables users to manipulate and act on a data set
+
+**List (Grid) Options:**
+- 2 columns (6/6 split) - For items with lengthy descriptions
+- 3 columns (4/4/4 split) - For visual items with multiple data types
+- 4 columns (3/3/3/3 split) - For user-generated galleries and collections, reveals up to 50% more content above the fold than 4/4/4
+- Custom - For mixed content needs
+
+**Grid Selection Considerations:**
+- Total amount of items to show
+- Content to display in each list item
+- What objects the list items reflect (match physical shapes when applicable)
+
+**Dashboards:**
+Display different types of data on a specific topic using a combination grid.
+
+Column span recommendations:
+- **3 or 4 columns** - For list items, previews, marketing, statistics, and charts
+- **12 columns (full width)** - For tables and marketing content
+- **8 columns** - For lists, tables with few data columns, setup wizards, and charts
+- **6 columns** - For lists, tables with few data columns, and statistics
+
+**Empty States:**
+- Use full width layout for empty state of a page
+- Indicates feature/product has no data yet, all data cleared, or not set up yet
+- Include clear CTA indicating what to do to fill the page
+- Can combine with other layout elements such as tabs, statistics widgets, or marketing cards
+
+#### 3. Marketing Layouts
+
+Marketing pages promote new products that site owners are not aware of yet. Built using the `<MarketingPageLayout/>` component split into 2 columns:
+
+1. Promo messaging
+2. Visual representation of product and features
+
+Optional footer area can display features or testimonials list.
+
+#### 4. Wizard Layouts
+
+Wizard pages guide users through setting up a product or feature. They split complex forms into steps for easier completion.
+
+**Entry Points:**
+- A marketing page
+- A marketing card
+- The primary action of a page
+- An empty state
+
+> **Note:** Wizards must have a final destination. After completing all steps, users should end up on a relevant page: a dashboard, a details page, or any other relevant location.
+
+
+### Related WDS Components
+
+- `<Page />` - Main page wrapper
+- `<Layout />` - Grid layout container
+- `<MarketingPageLayout />` - Marketing page wrapper
+- `<Card />` - Content container with 24px gaps between cards

package/skills/wix-app/references/DASHBOARD_PLUGIN.md

@@ -0,0 +1,205 @@
+
+# Wix Dashboard Plugin Builder
+
+Creates dashboard plugin extensions for Wix CLI applications. Dashboard plugins are interactive widgets that embed into predefined **slots** on dashboard pages managed by Wix first-party business apps (Wix Stores, Wix Bookings, Wix Blog, Wix eCommerce, etc.).
+
+Dashboard plugins occupy the full width of their slot and maintain dynamic height based on content.
+
+
+## Quick Start Checklist
+
+Follow these steps in order when creating a dashboard plugin:
+
+1. [ ] Identify the target slot ID — see [Slots Reference](dashboard-plugin/SLOTS.md)
+2. [ ] Create plugin folder: `src/extensions/dashboard/plugins/<plugin-name>/`
+3. [ ] Create `<plugin-name>.extension.ts` with `extensions.dashboardPlugin()` and unique UUID
+4. [ ] Create `<plugin-name>.tsx` with React component wrapped in `WixDesignSystemProvider`
+5. [ ] Update `src/extensions.ts` to import and use the new extension
+
+## Architecture
+
+Dashboard plugins operate through two mechanisms:
+
+1. **Visual Integration** — Embedding plugin UI inside a supported dashboard page slot
+2. **Logical Integration** — Implementing communication between the plugin and the host page's data via `observeState()`
+
+## Files and Code Structure
+
+Dashboard plugins live under `src/extensions/dashboard/plugins/`. Each plugin has its own folder.
+
+```
+src/extensions/dashboard/plugins/
+└── <plugin-name>/
+    ├── <plugin-name>.extension.ts   # Builder configuration
+    └── <plugin-name>.tsx            # React component
+```
+
+> **Note:** This is the default folder structure created by the CLI. You can move these files to any location within the `src/` folder and update the references in your `extension.ts` file.
+
+## Plugin Builder Configuration
+
+### File: `<plugin-name>.extension.ts`
+
+```typescript
+import { extensions } from "@wix/astro/builders";
+
+export const dashboardpluginMyPlugin = extensions.dashboardPlugin({
+  id: "{{GENERATE_UUID}}",
+  title: "My Dashboard Plugin",
+  extends: "<SLOT_ID>",
+  component: "./extensions/dashboard/plugins/my-plugin/my-plugin.tsx",
+});
+```
+
+**CRITICAL: UUID Generation**
+
+The `id` must be a unique, static UUID v4 string. Generate a fresh UUID for each extension — do NOT use `randomUUID()` or copy UUIDs from examples. Replace `{{GENERATE_UUID}}` with a freshly generated UUID like `"a1b2c3d4-e5f6-7890-abcd-ef1234567890"`.
+
+### Builder Fields
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | string | Unique plugin ID (GUID). Must be unique across all extensions in the project. |
+| `title` | string | Plugin title. Used to refer to the plugin in the project dashboard. |
+| `extends` | string | Slot ID of the dashboard page hosting the plugin. See [Slots Reference](dashboard-plugin/SLOTS.md). |
+| `component` | string | Relative path to the plugin content component (`.tsx` file). |
+
+### The `extends` Field
+
+The `extends` field specifies which dashboard page slot hosts your plugin. Each Wix business app exposes slots on its dashboard pages. You must provide the exact slot ID.
+
+**Important:** Some slots with the same ID appear on different pages within the dashboard. If you create a plugin for a slot that exists on multiple pages, the plugin is displayed on all of those pages.
+
+For the complete list of available slot IDs, see [Slots Reference](dashboard-plugin/SLOTS.md).
+
+## Plugin Component
+
+### File: `<plugin-name>.tsx`
+
+The plugin component is a React component that renders within the dashboard page slot.
+
+```typescript
+import type { FC } from "react";
+import { WixDesignSystemProvider, Card, Text } from "@wix/design-system";
+import "@wix/design-system/styles.global.css";
+
+const Plugin: FC = () => {
+  return (
+    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
+      <Card>
+        <Card.Header title="My Plugin" />
+        <Card.Divider />
+        <Card.Content size="medium">
+          <Text>Plugin content goes here.</Text>
+        </Card.Content>
+      </Card>
+    </WixDesignSystemProvider>
+  );
+};
+
+export default Plugin;
+```
+
+### Available Resources in Plugin Components
+
+- **React** — Component logic and state management
+- **Wix SDK** — Access Wix business solutions and site data
+- **Wix Dashboard SDK** (`@wix/dashboard`) — Interact with the dashboard page's data passed to the slot
+- **Wix Design System** (`@wix/design-system`) — Native-looking React components matching Wix's own dashboard UI
+
+## Interacting with Dashboard Data
+
+Use `observeState()` from the Dashboard SDK to receive data from the host dashboard page:
+
+```typescript
+import { dashboard } from "@wix/dashboard";
+import { useEffect, useState } from "react";
+
+const Plugin: FC = () => {
+  const [params, setParams] = useState<Record<string, unknown>>({});
+
+  useEffect(() => {
+    dashboard.observeState((componentParams) => {
+      setParams(componentParams);
+    });
+  }, []);
+
+  return (
+    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
+      <Card>
+        <Card.Content size="medium">
+          <Text>Received data: {JSON.stringify(params)}</Text>
+        </Card.Content>
+      </Card>
+    </WixDesignSystemProvider>
+  );
+};
+```
+
+### Typed Props from Host Apps
+
+Some Wix apps expose typed interfaces for their slot parameters. Import them from the app's dashboard package:
+
+```typescript
+import type { plugins } from "@wix/blog/dashboard";
+
+type Props = plugins.BlogPosts.PostsBannerParams;
+
+const Plugin: FC<Props> = (props) => {
+  // props are typed according to the Blog Posts slot contract
+};
+```
+
+> **Note:** Typed props availability varies by Wix app. Consult the specific app's SDK documentation. Not all slots provide typed parameter interfaces.
+
+## Extension Registration
+
+**Extension registration is MANDATORY and has TWO required steps.**
+
+### Step 1: Create Plugin-Specific Extension File
+
+Each dashboard plugin requires an `<plugin-name>.extension.ts` file in its folder. See [Plugin Builder Configuration](#plugin-builder-configuration) above.
+
+### Step 2: Register in Main Extensions File
+
+**CRITICAL:** After creating the plugin-specific extension file, you MUST read [Extension Registration reference](EXTENSION_REGISTRATION.md) and follow the "App Registration" section to update `src/extensions.ts`.
+
+**Without completing Step 2, the dashboard plugin will not appear on the dashboard page.**
+
+## Sizing Behavior
+
+- Dashboard plugins take the **full width** of their slot
+- **Height** adjusts dynamically based on content within slot boundaries
+- When using Dashboard SDK or dashboard-react SDK, dimensions change dynamically based on contents
+
+## Troubleshooting
+
+| Symptom | Cause | Fix |
+|---------|-------|-----|
+| Plugin not appearing on dashboard page | Missing registration | Import and `.use()` in `src/extensions.ts` |
+| Plugin not appearing on dashboard page | Wrong slot ID | Verify `extends` field matches a valid slot ID from [Slots Reference](dashboard-plugin/SLOTS.md) |
+
+## Dashboard-Plugin-specific Conventions
+
+- The `extends` field MUST contain a valid slot ID from a Wix business app — do NOT invent slot IDs.
+
+## Examples
+
+### Blog Posts Banner Plugin
+
+**Request:** "Create a plugin for the Wix Blog posts page that shows a promotional banner"
+
+**Output:** Plugin targeting slot `46035d51-2ea9-4128-a216-1dba68664ffe` (Blog Posts page) with a Card component displaying promotional content, using `observeState()` to access blog post data.
+
+### Bookings Staff Calendar Widget
+
+**Request:** "Add a plugin to the Wix Bookings staff page that shows weekly availability"
+
+**Output:** Plugin targeting slot `261e84a2-31d0-4258-a035-10544d251108` (Bookings Staff page) with a schedule display component, using `observeState()` to receive staff data.
+
+### Order Details Plugin
+
+**Request:** "Create a plugin on the eCommerce order page showing fulfillment status"
+
+**Output:** Plugin targeting slot `cb16162e-42aa-41bd-a644-dc570328c6cc` (eCommerce Order page) with status badges and fulfillment details, using `observeState()` to access order data.
+