useModuleStyle

Location: src/hooks/useModuleStyle.js

Overview

Manages style tokens for a single Homeroom module. Supports four inheritance modes that control how module-specific tokens merge with the parent Homeroom style, enabling modules to either fully match their room, blend selected aspects, or be styled completely independently.

Signature

function useModuleStyle(
  moduleId: string | null,
  initialStyle?: object | null,
  initialInherit?: 'full' | 'colors' | 'shapes' | 'none'
): {
  moduleStyle: object | null,
  effectiveStyle: object | null,
  inheritMode: string,
  setInheritMode: (mode: string) => void,
  saveStyle: (tokens: object | null, inherit?: string) => Promise<boolean>,
  clearStyle: () => Promise<boolean>,
  saving: boolean,
  homeroomStyle: object | null,
  hasCustomStyle: boolean,
}

Parameters

Parameter	Type	Default	Description
moduleId	string | null	--	The home_room_modules.id to save against
initialStyle	object | null	null	Pre-existing style_tokens from the module row
initialInherit	string	'full'	Initial inheritance mode

Inheritance Modes

Mode	Behavior
full	Uses the Homeroom style as-is; module tokens are ignored
colors	Homeroom color tokens (hue/saturation/lightness, glow) merged onto module shape/effect tokens
shapes	Homeroom shape tokens (corner, border, avatar, button) merged onto module color/effect tokens
none	Module tokens only; fully independent from Homeroom

Color Keys (merged in colors mode)

pH, pS, pL, sH, sS, sL, tH, tS, tL, bgH, bgS, bgL, surfOff, glowInt

Shape Keys (merged in shapes mode)

corner, cornerSz, borderW, avShape, avSize, btnShape

Return Value

Field	Type	Description
moduleStyle	object | null	Raw module-specific tokens (before inheritance merge)
effectiveStyle	object | null	Computed style after applying inheritance logic
inheritMode	string	Current inheritance mode
setInheritMode	(mode) => void	Change inheritance mode (local only; call saveStyle to persist)
saveStyle	(tokens, inherit?) => Promise<boolean>	Persist tokens + inheritance mode to database
clearStyle	() => Promise<boolean>	Clear module style and revert to full inheritance
saving	boolean	true while a save is in progress
homeroomStyle	object | null	The parent Homeroom tokens (for comparison or preview)
hasCustomStyle	boolean	true if the module has its own tokens

Usage

import { useModuleStyle } from '../hooks/useModuleStyle';
import { useStyleFor } from '../contexts/StyleContext';

function ModuleCard({ module }) {
  const {
    effectiveStyle,
    inheritMode,
    setInheritMode,
    saveStyle,
    hasCustomStyle,
  } = useModuleStyle(module.id, module.style_tokens, module.inherit_style);

  // Compute visual values from the effective tokens
  const computed = useStyleFor(effectiveStyle);

  return (
    <div style={{ background: computed.colors.surf, fontFamily: computed.fontFamily }}>
      {/* Module content */}
      <select value={inheritMode} onChange={(e) => setInheritMode(e.target.value)}>
        <option value="full">Match Room</option>
        <option value="colors">Room Colors</option>
        <option value="shapes">Room Shapes</option>
        <option value="none">Independent</option>
      </select>
    </div>
  );
}

Database

Requires style_tokens (JSONB) and inherit_style (TEXT) columns on the home_room_modules table. These are not yet added by default — a migration is needed:

ALTER TABLE home_room_modules ADD COLUMN IF NOT EXISTS style_tokens JSONB;
ALTER TABLE home_room_modules ADD COLUMN IF NOT EXISTS inherit_style TEXT DEFAULT 'full';

Dependencies

• useHomeroomStyle — Reads the Homeroom style for inheritance merging
• supabase — Direct database writes to home_room_modules

Related

• useHomeroomStyle — Manages the parent Homeroom style
• usePostStyle — Similar pattern for post-specific tokens
• StyleContext (src/contexts/StyleContext.jsx) — useStyleFor() computes visual values from effective tokens