@mounaji_npm/widget-controls

Complete reusable React panel for configuring @mounaji_npm/web-widget.

Features

• Full widget control surface (appearance, identity, copy, behavior).
• Advanced controls for file uploads, rate limiting, and proactive messages.
• Contract-safe normalization via normalizeWidgetVisualControls.
• Configurable rendering by mode and section visibility.
• Internal styling (no Tailwind dependency required).

Install

npm install @mounaji_npm/widget-controls

Usage

import { useState } from 'react';
import {
  WidgetAdvancedControls,
  DEFAULT_WIDGET_VISUAL_CONTROLS,
  normalizeWidgetVisualControls,
} from '@mounaji_npm/widget-controls';

export function WidgetEditor() {
  const [config, setConfig] = useState(DEFAULT_WIDGET_VISUAL_CONTROLS);

  return (
    <WidgetAdvancedControls
      value={config}
      onChange={(next) => setConfig(normalizeWidgetVisualControls(next))}
    />
  );
}

API

WidgetAdvancedControls props

• value: object current config.
• onChange: (nextConfig) => void receives normalized config.
• mode?: 'full' | 'compact' default section preset.
• visibleSections?: string[] explicit section ids override mode preset.
• title?: string panel title.
• subtitle?: string panel subtitle.
• showHeader?: boolean defaults to true.
• showReset?: boolean defaults to true.
• resetLabel?: string defaults to Reset to defaults.

Section ids

Use with visibleSections:

• appearance
• identity
• copy
• behavior
• upload
• rate-limits
• proactive

You can also import WIDGET_CONTROL_SECTION_IDS.

Exports

• WidgetAdvancedControls
• DEFAULT_WIDGET_VISUAL_CONTROLS
• normalizeWidgetVisualControls
• sanitizeWidgetVisualControls
• FILE_TYPE_OPTIONS
• WIDGET_CONTROL_SECTION_IDS

Compact mode example

<WidgetAdvancedControls
  mode="compact"
  value={config}
  onChange={setConfig}
/>

Partial sections example

<WidgetAdvancedControls
  value={config}
  onChange={setConfig}
  visibleSections={['appearance', 'identity', 'copy']}
  title="Quick Widget Setup"
/>