@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)

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

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.