@warnthyfriends/panda-marshall

Enterprise-grade ADA accessibility, GDPR/CCPA cookie consent, and AI assistant widgets, delivered under the PandaMarshall brand. Includes white-label branding, automatic theme detection, PandaMarshall bamboo-green defaults, and a reseller license program.

Features

• ADA Accessibility Widget — Full WCAG 2.1 / Section 508 compliance (font scaling, high contrast, zoom, line spacing, screen reader support)
• GDPR Cookie Consent — Customizable cookie consent banner with granular preference controls
• CCPA Notice — California Consumer Privacy Act "Do Not Sell" notice
• AI Assistant — Optional AI chat assistant (OpenAI-powered or rule-based fallback)
• ComplianceProvider — Single wrapper that initializes all widgets with unified config
• One-click Color Import — Automatically detects host site's CSS variables and applies them
• Preset Themes — PandaMarshall (default), Light, Dark, Corporate Blue, Minimal, Emerald, Purple
• White-label Branding — Replace PandaMarshall branding with your own logo, company name, and colors
• Subscription Validation — API key verification with 7-day grace period
• Reseller License Program — Bulk license tiers for agencies and consultants

Installation

This is a private scoped package under the @warnthyfriends organization. npm authentication is required to install it.

1. Authenticate with npm using a token that has access to the @warnthyfriends scope:

   npm login --scope=@warnthyfriends

   Or configure your token in .npmrc:

   //registry.npmjs.org/:_authToken=YOUR_TOKEN

2. Install the package:

   npm install @warnthyfriends/panda-marshall

Quick Start — React (with server-side validation)

License validation runs server-side only — the browser bundle makes zero network calls. Call validateSubscription from your Node.js backend and pass the result to the widget via subscriptionInfo.

1. Server-side validation (Node.js / Express / Next.js API route)

import { validateSubscription } from '@warnthyfriends/panda-marshall/server';

// Call from your server — never from the browser
const subscriptionInfo = await validateSubscription(
  process.env.PANDA_API_KEY,
  process.env.PANDA_SITE_ID,
  'https://pandazis.org/api/compliance/validate'
);

// Forward subscriptionInfo to your frontend (e.g. via getServerSideProps, API route, or SSR)

2. Pass to the widget

import { ComplianceProvider } from '@warnthyfriends/panda-marshall';

function App({ subscriptionInfo }) {
  return (
    <ComplianceProvider
      subscriptionInfo={subscriptionInfo}
      theme="pandaMarshall"
      enableAccessibility={true}
      enableCookieConsent={true}
      enableCCPA={false}
      enableAIAssistant={false}
    >
      <YourApp />
    </ComplianceProvider>
  );
}

When subscriptionInfo is not provided, isValid is false (safe degraded state — subscription-gated context consumers will see an invalid subscription).

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | subscriptionInfo | SubscriptionInfo | undefined | Result of server-side validateSubscription(). Required for gated features. | | apiKey | string | undefined | API key forwarded to child widgets | | siteId | string | undefined | Site identifier forwarded to child widgets | | theme | string \| ThemeConfig | 'pandaMarshall' | Preset name or custom theme object | | autoDetectColors | boolean | false | Auto-detect CSS variables from host site | | branding | BrandingConfig | {} | White-label branding options | | position | PositionConfig | {} | Widget positioning | | enableAccessibility | boolean | true | Show accessibility widget | | enableCookieConsent | boolean | true | Show cookie consent banner | | enableCCPA | boolean | false | Show CCPA "Do Not Sell" notice | | enableAIAssistant | boolean | false | Show AI chat assistant |

Preset Themes

The default theme is pandaMarshall — bamboo-green primary (#4CAF82) with gold accent (#D4A017). Additional built-in presets:

<ComplianceProvider theme="pandaMarshall" ...>  {/* default */}
<ComplianceProvider theme="light" ...>
<ComplianceProvider theme="dark" ...>
<ComplianceProvider theme="corporateBlue" ...>
<ComplianceProvider theme="minimal" ...>
<ComplianceProvider theme="emerald" ...>
<ComplianceProvider theme="purple" ...>

Theme Customization

Pass a custom theme object to override any default colors:

| Property | Type | PandaMarshall Default | Description | |----------|------|-----------------------|-------------| | primaryColor | string | #4CAF82 | Main brand color (bamboo-green) | | accentColor | string | #D4A017 | Accent color (gold) | | secondaryColor | string | #2d6b4f | Secondary/dark shade | | backgroundColor | string | #f4fbf7 | Widget background | | textColor | string | #1a2e24 | Body text color | | borderColor | string | #a8d5bc | Border/divider color |

import { ComplianceProvider } from '@warnthyfriends/panda-marshall';

<ComplianceProvider
  theme={{
    name: 'My Custom Theme',
    primaryColor: '#FF6B35',
    accentColor: '#004E89',
    secondaryColor: '#1A936F',
    backgroundColor: '#ffffff',
    textColor: '#1a1a1a',
    borderColor: '#e5e7eb',
  }}
  ...
/>

White-label Branding

Replace PandaMarshall branding entirely with your own:

<ComplianceProvider
  branding={{
    companyName: "Acme Corp",
    logoUrl: "https://acme.com/logo.png",
    hidePoweredBy: true,
    poweredByText: "Powered by Acme Compliance",
    supportEmail: "[email protected]",
    accentColors: {
      primary: "#FF6B35",
      secondary: "#004E89",
      accent: "#1A936F",
    },
  }}
  ...
/>

Publishing (for maintainers)

To publish a new version of @warnthyfriends/panda-marshall:

1. Ensure NPM_TOKEN is set in the Replit environment-secrets panel.

2. Run the publish script from the repository root:

   sh panda-package/do-publish-panda.sh

   This script will:

   • Validate NPM_TOKEN is set
   • Generate TypeScript declarations
   • Bundle ESM and CJS outputs
   • Publish to npm under @warnthyfriends/panda-marshall with restricted access

3. Verify the package at: https://www.npmjs.com/package/@warnthyfriends/panda-marshall

Support

Questions, bug reports, or feature requests: [email protected]

Visit pandazis.com for documentation and reseller information.

License

SEE LICENSE IN LICENSE

© PandaMarshall / pandazis.com