Build a Vanilla JS map-like Utility and DOM Renderer

Context

You are working in a basic browser environment with no frameworks or libraries. Implement a function that behaves like Array.prototype.map but must:

• Not use the built-in map method.
• Work for both arrays and plain key–value objects ("dictionaries").

Then use it to transform a list of objects into a render-friendly shape and render one div per transformed item into the DOM, with appropriate classes/attributes. Handle empty and error states.

Requirements

1. Implement a map-like function that:
   • Accepts an input list (array or plain object), a callback, and an optional thisArg.
   • For arrays: iterates items (skipping holes) and returns a new array of mapped results.
   • For objects: iterates own enumerable keys and returns a new array of mapped results.
   • Validates inputs and throws a helpful error if misused.
2. Implement a renderer that:
   • Renders one div per transformed item into a container in the DOM.
   • Applies classes and any attributes provided by the transformed items.
   • Uses safe text rendering (no innerHTML for untrusted data).
   • Shows an empty state if there are no items.
   • Shows an error state if something goes wrong.
3. Use only vanilla JavaScript in a script tag. No frameworks.