@rebasepro/agent-skills 0.7.0 → 0.9.0

package/skills/rebase-ui-components/SKILL.md

@@ -848,6 +848,97 @@ Key props: `data`, `columns` (array of `VirtualTableColumn`), `cellRenderer`, `o
 
 See `VirtualTableProps` and `VirtualTableColumn` types for full API.
 
+#### Generic Editable Tables & Cell Selection
+
+`@rebasepro/ui` includes a generic, high-performance selection engine and primitive cell inputs that allow you to construct keyboard-navigable editable grid tables without any Rebase database dependencies.
+
+**Selection Hooks & Context:**
+* `createVirtualTableSelectionStore()` — Instantiates a selection store tracking active selection by `rowId` and `columnKey`. It uses `useSyncExternalStore` so that selection changes only trigger re-renders on the active cell (preventing whole-table lag).
+* `VirtualTableSelectionProvider` — React context provider to pass down the selection store.
+* `useVirtualTableSelection()` — Hook to access the selection store and triggers inside custom cells.
+* `useVirtualTableCellSelected(store, columnKey, rowId)` — Returns `boolean` indicating if this cell is currently focused.
+
+**Generic Cell Inputs:**
+* `VirtualTableInput` — Auto-growing, debounced multiline/single text input.
+* `VirtualTableNumberInput` — Constrained numeric input.
+* `VirtualTableSwitch` — Small boolean switch toggle.
+* `VirtualTableDateField` — Decoupled Date/DateTime picker (accepts `locale`, `timezone`, `mode`).
+* `VirtualTableSelect` — Option-based single/multi dropdown list using chips. Takes `options: { value, label, color? }[]`.
+
+**Example Custom Editable Table:**
+```tsx
+import React, { useMemo, useState, useCallback } from "react";
+import { 
+    VirtualTable, 
+    createVirtualTableSelectionStore, 
+    VirtualTableSelectionProvider, 
+    useVirtualTableCellSelected, 
+    useVirtualTableSelection,
+    VirtualTableInput 
+} from "@rebasepro/ui";
+
+function EditableCell({ rowId, columnKey, value, onUpdate }) {
+    const { selectionStore } = useVirtualTableSelection();
+    const selected = useVirtualTableCellSelected(selectionStore, columnKey, rowId);
+
+    return (
+        <div 
+            className="w-full h-full flex items-center px-2 cursor-text"
+            onClick={(e) => selectionStore.select({ 
+                rowId, 
+                columnKey, 
+                cellRect: e.currentTarget.getBoundingClientRect(),
+                width: e.currentTarget.offsetWidth,
+                height: e.currentTarget.offsetHeight
+            })}
+        >
+            <VirtualTableInput
+                value={value}
+                updateValue={onUpdate}
+                focused={selected}
+                disabled={false}
+                multiline={false}
+            />
+        </div>
+    );
+}
+
+export function MyEditableGrid() {
+    const [data, setData] = useState([
+        { id: "row-1", name: "Project Alpha" },
+        { id: "row-2", name: "Project Beta" }
+    ]);
+
+    const selectionStore = useMemo(() => createVirtualTableSelectionStore(), []);
+
+    const updateCell = useCallback((rowId: string, value: string) => {
+        setData(prev => prev.map(row => row.id === rowId ? { ...row, name: value } : row));
+    }, []);
+
+    const columns = [
+        { key: "name", title: "Name", width: 300 }
+    ];
+
+    return (
+        <VirtualTableSelectionProvider store={selectionStore}>
+            <VirtualTable
+                data={data}
+                columns={columns}
+                rowHeight={52}
+                cellRenderer={({ rowData, column }) => (
+                    <EditableCell
+                        rowId={rowData.id}
+                        columnKey={column.key}
+                        value={rowData.name}
+                        onUpdate={(val) => updateCell(rowData.id, val || "")}
+                    />
+                )}
+            />
+        </VirtualTableSelectionProvider>
+    );
+}
+```
+
 ### ToggleButtonGroup
 
 Single-select button group for toggling between options.

package/skills/rebase-webhooks/SKILL.md

@@ -5,7 +5,7 @@ description: Guide for sending outbound HTTP webhooks on entity changes in a Reb
 
 # Rebase Webhooks
 
-> **IMPORTANT FOR AGENTS**: The `WebhookDispatcher` is a **standalone service class** exported from `@rebasepro/server-core`. It is **not** auto-wired into the backend init pipeline — you must instantiate it yourself and call `onEntityChange()` from your application code (e.g. entity callbacks, custom functions, or cron jobs). Do NOT look for a `webhooks` key in `RebaseBackendConfig`.
+> **IMPORTANT FOR AGENTS**: The `WebhookDispatcher` is a **standalone service class** exported from `@rebasepro/server-core`. It is **not** auto-wired into the backend init pipeline — you must instantiate it yourself and call `onEntityChange()` from your application code (e.g. collection callbacks, custom functions, or cron jobs). Do NOT look for a `webhooks` key in `RebaseBackendConfig`.
 
 > **IMPORTANT FOR AGENTS**: Webhooks are **outbound** HTTP POST requests sent by your Rebase backend to external URLs. They are NOT inbound endpoints. To receive webhooks FROM external services, use Rebase custom functions instead (see `rebase-custom-functions` skill).
 
@@ -71,7 +71,7 @@ dispatcher.setWebhooks([
 
 ### Dispatch on Entity Changes
 
-Call `onEntityChange()` whenever an entity is created, updated, or deleted. The dispatcher checks all registered webhooks and fires matching ones.
+Call `onEntityChange()` whenever a entity is created, updated, or deleted. The dispatcher checks all registered webhooks and fires matching ones.
 
 ```typescript
 const results = await dispatcher.onEntityChange(
@@ -355,13 +355,13 @@ If the receiver does not respond within 10 seconds, the request is aborted and t
 
 ## Integration Patterns
 
-### With Entity Callbacks
+### With Collection Callbacks
 
-The most common pattern is to wire the dispatcher into Rebase entity callbacks so webhooks fire automatically on CRUD operations:
+The most common pattern is to wire the dispatcher into Rebase collection callbacks so webhooks fire automatically on CRUD operations:
 
 ```typescript
 // backend/collections/orders.ts
-import type { EntityCollection, EntityCallbacks } from "@rebasepro/types";
+import type { CollectionConfig, CollectionCallbacks } from "@rebasepro/types";
 import { WebhookDispatcher } from "@rebasepro/server-core/services/webhook-service";
 
 const dispatcher = new WebhookDispatcher();
@@ -376,35 +376,28 @@ dispatcher.setWebhooks([
     },
 ]);
 
-const callbacks: EntityCallbacks = {
-    afterCreate: async ({ entity, collection }) => {
+const callbacks: CollectionCallbacks = {
+    afterSave: async ({ id, values, previousValues, status, collection }) => {
+        const event = status === "new" ? "INSERT" : "UPDATE";
         await dispatcher.onEntityChange(
             collection.path,
-            "INSERT",
-            entity.id,
-            entity
-        );
-    },
-    afterUpdate: async ({ entity, previousEntity, collection }) => {
-        await dispatcher.onEntityChange(
-            collection.path,
-            "UPDATE",
-            entity.id,
-            entity,
-            previousEntity
+            event,
+            String(id),
+            values,
+            status === "new" ? undefined : previousValues
         );
     },
-    afterDelete: async ({ entityId, collection }) => {
+    afterDelete: async ({ id, collection }) => {
         await dispatcher.onEntityChange(
             collection.path,
             "DELETE",
-            entityId,
+            String(id),
             null
         );
     },
 };
 
-const ordersCollection: EntityCollection = {
+const ordersCollection: CollectionConfig = {
     name: "Orders",
     path: "orders",
     callbacks,
@@ -519,9 +512,11 @@ Then import it from any callback or function:
 ```typescript
 import { dispatcher } from "../lib/webhooks";
 
-// In an entity callback:
-afterCreate: async ({ entity, collection }) => {
-    await dispatcher.onEntityChange(collection.path, "INSERT", entity.id, entity);
+// In a collection callback:
+afterSave: async ({ id, values, status, collection }) => {
+    if (status === "new") {
+        await dispatcher.onEntityChange(collection.path, "INSERT", String(id), values);
+    }
 },
 ```
 
@@ -535,7 +530,7 @@ Registers the list of webhooks to watch. Filters out any with `enabled: false`.
 |-----------|------|-------------|
 | `webhooks` | `WebhookConfig[]` | Array of webhook configurations. |
 
-### `onEntityChange(table, event, entityId, entity, previousEntity?): Promise<WebhookDeliveryResult[]>`
+### `onEntityChange(table, event, id, entity, previousEntity?): Promise<WebhookDeliveryResult[]>`
 
 Checks all registered webhooks for matching `table` + `event`, and dispatches to each match.
 
@@ -543,7 +538,7 @@ Checks all registered webhooks for matching `table` + `event`, and dispatches to
 |-----------|------|-------------|
 | `table` | `string` | The database table name (e.g. `"orders"`). |
 | `event` | `"INSERT" \| "UPDATE" \| "DELETE"` | The type of entity change. |
-| `entityId` | `string` | The unique ID of the changed entity. |
+| `id` | `string` | The unique ID of the changed entity. |
 | `entity` | `Record<string, unknown> \| null` | The current entity data. May be `null` for deletes. |
 | `previousEntity` | `Record<string, unknown> \| null` | *(Optional)* The previous entity state. Only relevant for `UPDATE` events — included as `old_record` in the payload. |
 
@@ -557,7 +552,7 @@ The dispatcher supports three event types, passed as the `event` parameter to `o
 |-------|-------------|--------------------|-----------------------|
 | `INSERT` | A new entity was created | The new entity | `undefined` |
 | `UPDATE` | An existing entity was modified | The updated entity | The entity before update |
-| `DELETE` | An entity was removed | The deleted entity (or `null`) | `undefined` |
+| `DELETE` | a entity was removed | The deleted entity (or `null`) | `undefined` |
 
 ## Error Handling
 
@@ -592,9 +587,9 @@ for (const result of results) {
 If you don't want webhook delivery to block your API response, use fire-and-forget:
 
 ```typescript
-afterCreate: async ({ entity, collection }) => {
+afterSave: async ({ id, values, collection }) => {
     // Fire-and-forget — don't await
-    dispatcher.onEntityChange(collection.path, "INSERT", entity.id, entity)
+    dispatcher.onEntityChange(collection.path, "INSERT", String(id), values)
         .catch(err => console.error("Webhook dispatch error:", err));
 },
 ```