dom

// Basic event listener
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type);

// 1. Create SVG elements
const svgNS = 'http://www.w3.org/2000/svg';

function createSVGElement(type, attributes = {}) {
  const element = document.createElementNS(svgNS, type);
  Object.entries(attributes).forEach(([key, value]) => {

// Creating elements
const div = document.createElement('div');
div.id = 'container';
div.className = 'box rounded';
div.textContent = 'Hello World';

import { useEffect, RefObject } from "react";

const TABBABLE =
  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';

export function useFocusTrap(

import { useCallback, useEffect, useRef, useState } from 'react';

export type CopyStatus = 'idle' | 'copied' | 'error';

function fallbackCopy(text: string): boolean {
  const textarea = document.createElement('textarea');

import React, { useMemo } from 'react';
import { VirtualList } from './VirtualList';

interface LogEntry {
  id: number;
  level: 'info' | 'warn' | 'error';

import { StreamActions } from "@hotwired/turbo"

StreamActions.highlight = function () {
  const className = this.getAttribute("data-highlight-class") || "flash-highlight"
  const duration = parseInt(this.getAttribute("data-highlight-duration"), 10) || 1500

.confirm-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 26rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

import { ReactNode, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'

interface PortalProps {
  children: ReactNode
  container?: Element

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["wrapper", "template", "anchor"]

  add(event) {