open-index/open-npm huggingface dataset:
npm package: @ribcreative/visual-edits
Description: Internal RIB package that powers Visual Edits in generated projects.
Latest version: 0.0.4

# @ribcreative/visual-edits

Internal RIB package that powers Visual Edits in generated projects.

## What it provides

- `@ribcreative/visual-edits/vite`: Vite plugin that auto-tags JSX host elements with `data-rib-*` metadata and injects the bridge at build/serve time.
- `@ribcreative/visual-edits/bridge`: runtime bridge installer for parent/iframe messaging, selection mode, pending styles, and preview height reporting.
- `@ribcreative/visual-edits/envelope`: envelope V1 protocol utilities.
- `@ribcreative/visual-edits/tagger`: JSX tag transform utilities.
- `@ribcreative/visual-edits/origin`: trusted-origin resolution helpers.

## Template usage (Vite)

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { ribVisualEdits } from "@ribcreative/visual-edits/vite";

const enabled = process.env.RIB_VISUAL_EDITS === "1";

export default defineConfig({
  plugins: [react(), enabled ? ribVisualEdits() : undefined].filter(Boolean)
});
```

## Runtime usage

```ts
import { installVisualEditsBridge } from "@ribcreative/visual-edits/bridge";

installVisualEditsBridge();
```

## Color pipeline

The bridge is the source of truth for color options shown in the Visual Edits inspector.

- Available text/background/border color options are derived from the real compiled CSS loaded in the preview iframe.
- The bridge scans live `document.styleSheets`, extracts supported utility classes such as `text-*`, `bg-*`, and `border-*`, and resolves their computed swatches in the selected element scope.
- Selection messages sent to the parent include:
  - `themeColorCatalog`: inspector options with `{ value, label, swatch }`
  - `themeTokenSnapshot`: a `className -> computedColor` lookup used only for swatch/display resolution
- Draft preview edits do not toggle classes on the selected element. Both token-backed colors and custom colors are applied transiently as inline styles in the iframe so the preview updates immediately.
- Persisted edits must match the preview contract:
  - token-backed colors persist the real utility class selected from the project CSS
  - custom colors persist explicit style values

This avoids showing generic fallback tokens that are not actually supported by the current project/template.