Styling and inspection

Declare styling to apply validated selector rules and inspection to receive sanitized element events. Fluxer-specific selectors belong in the plugin and may need updating when Fluxer changes.

Apply and remove styles

cleanup.push(
  await api.styling.apply([
    {
      selector: '[data-flx="your.public.marker"]',
      declarations: { outline: "1px solid #b980ff", "outline-offset": "-1px" },
    },
  ]),
);

Replace the illustrative marker with the actual public surface your plugin targets. Rules remain selector-based across rerenders. The returned disposer removes the rule.

Allowed properties are outline, outline-offset, border, border-color, border-radius, color, background-color, opacity, font-size, and font-weight. Values must pass browser validation. URLs, imports, executable expressions, and custom properties are rejected.

FluxPlugs’ privileged surfaces and their ancestors/descendants are excluded from styling.

Inspect elements

cleanup.push(
  await api.inspection.subscribe((event) => {
    if (event.kind === "click") {
      api.logger.debug("Inspected element", {
        tag: event.tag,
        role: event.role,
      });
    }
  }, false),
);

Events provide kind, sanitized tag/id/classes/role/dataFlx/text, and geometry. They do not expose HTML, DOM references, input values, or privileged surfaces.

Passing true as the second argument synchronously cancels inspected clicks. Use it only while an explicit inspection mode is active. Dispose the subscription when leaving that mode, not just on plugin shutdown.

Outlines demonstrates a plugin-owned inspector. Avoid logging inspected text, which can contain private conversation content.