Jetpack Compose Style UI for JavaScript

const { LinearLayout, Column, Row, mount } = AndroidLayouts;
const { TextView, MaterialButton } = AndroidComponents;

// Vertical LinearLayout
const layout = LinearLayout({
  orientation: 'vertical',
  width: 'match_parent',
  padding: 16,
  gap: 12,
  gravity: 'center_horizontal'
}, [
  TextView({ text: 'Hello World', textSize: 24 }),
  MaterialButton({ text: 'Click Me' })
]);

mount(layout, 'app');

const { Column, Row } = AndroidLayouts;
const { TextView, Icon } = AndroidComponents;

// Compose-style nesting
const card = Column({ padding: 16, gap: 8 }, [
  Row({ gravity: 'center_vertical', gap: 12 }, [
    Icon({ name: 'bx bx-user', size: 24 }),
    TextView({ text: 'John Doe', textStyle: 'bold' })
  ]),
  TextView({ text: 'Software Engineer', textColor: '#888' })
]);

const { GridLayout, GridParams } = AndroidLayouts;
const { Card, TextView } = AndroidComponents;

const grid = GridLayout({
  columns: 3,
  gap: 16,
  padding: 16
}, [
  // Regular item (1 column)
  Card({}, [TextView({ text: 'Item 1' })]),

  // Span 2 columns
  GridParams({ columnSpan: 2 },
    Card({}, [TextView({ text: 'Wide Item' })])
  ),

  // Span 2 rows
  GridParams({ rowSpan: 2 },
    Card({}, [TextView({ text: 'Tall Item' })])
  )
]);

const { ConstraintLayout, Constrained } = AndroidLayouts;
const { MaterialButton, TextView } = AndroidComponents;

const layout = ConstraintLayout({
  width: 'match_parent',
  height: 300
}, [
  // Centered title
  Constrained({ centerHorizontally: true, top: 20 },
    TextView({ text: 'Welcome', textSize: 32 })
  ),

  // Button pinned to bottom-right
  Constrained({ bottom: 16, right: 16 },
    MaterialButton({ text: 'Continue' })
  )
]);

const { FrameLayout, Positioned } = AndroidLayouts;
const { Avatar, Icon } = AndroidComponents;

const profilePic = FrameLayout({
  width: 80,
  height: 80
}, [
  // Avatar in center
  Positioned({ gravity: 'center' },
    Avatar({ size: 64, text: 'JD' })
  ),

  // Status indicator in bottom-right
  Positioned({ gravity: 'bottom_right', zIndex: 1 },
    Icon({ name: 'bx bxs-circle', size: 16, color: '#3fb950' })
  )
]);

const { TextView } = AndroidComponents;

const title = TextView({
  text: 'Welcome Back!',
  textSize: 32,
  textStyle: 'bold',
  textColor: '#6750a4',
  gravity: 'center'
});

// Update text programmatically
title.setText('Hello, John!');

const { MaterialButton } = AndroidComponents;

// Filled button with icon
const saveBtn = MaterialButton({
  text: 'Save Changes',
  variant: 'filled',
  leadingIcon: 'bx bx-save',
  onClick: async () => {
    saveBtn.setLoading(true, 'Saving...');
    await saveData();
    saveBtn.setLoading(false);
  }
});

// Icon-only FAB
const fab = MaterialButton({
  leadingIcon: 'bx bx-plus',
  iconOnly: true,
  size: 'large',
  variant: 'filled'
});

const { MaterialInput } = AndroidComponents;

const emailInput = MaterialInput({
  label: 'Email Address',
  type: 'email',
  leadingIcon: 'bx bx-envelope',
  helperText: 'We will never share your email',
  required: true,
  onInput: (value) => console.log(value),
  onBlur: (value) => {
    if (!value.includes('@')) {
      emailInput.setError('Invalid email format');
    } else {
      emailInput.setSuccess('Looks good!');
    }
  }
});

const { MaterialSwitch } = AndroidComponents;

const darkModeSwitch = MaterialSwitch({
  label: 'Dark Mode',
  checked: false,
  onChange: (isChecked) => {
    document.documentElement.classList.toggle('dark', isChecked);
  }
});

const { Card, TextView, Avatar } = AndroidComponents;
const { Row, Column } = AndroidLayouts;

const userCard = Card({
  variant: 'outlined',
  padding: 16,
  onClick: () => showProfile()
}, [
  Row({ gap: 16, gravity: 'center_vertical' }, [
    Avatar({ text: 'JD', size: 48 }),
    Column({ gap: 4 }, [
      TextView({ text: 'John Doe', textStyle: 'bold' }),
      TextView({ text: '@johndoe', textSize: 12 })
    ])
  ])
]);

const { RecyclerView, Card, TextView } = AndroidComponents;
const { Row } = AndroidLayouts;

const userList = RecyclerView({
  data: users,
  height: 400,
  divider: true,
  emptyText: 'No users found',

  // Adapter renders each item
  adapter: (user, index) =>
    Card({ padding: 12 }, [
      Row({ gap: 12 }, [
        Avatar({ text: user.name }),
        TextView({ text: user.name })
      ])
    ]),

  // Infinite scroll
  onLoadMore: async (offset) => {
    const moreUsers = await fetchUsers(offset);
    return { data: moreUsers, hasMore: moreUsers.length > 0 };
  }
});

const { TabLayout } = AndroidComponents;
const { Column, TextView } = AndroidLayouts;

const tabLayout = TabLayout({
  tabs: [
    { text: 'Home', icon: 'bx bx-home' },
    { text: 'Explore', icon: 'bx bx-compass' },
    { text: 'Profile', icon: 'bx bx-user', badge: '3' }
  ],
  pages: [
    Column({}, [TextView({ text: 'Home Content' })]),
    Column({}, [TextView({ text: 'Explore Content' })]),
    Column({}, [TextView({ text: 'Profile Content' })])
  ],
  style: 'secondary',
  onTabSelected: (index, tab) => console.log('Selected:', tab.text)
});

const { BottomNavigation } = AndroidComponents;

const bottomNav = BottomNavigation()
  .setItems([
    { id: 'home', name: 'Home', icon: 'bx bx-home' },
    { id: 'search', name: 'Search', icon: 'bx bx-search' },
    { id: 'notif', name: 'Notifications', icon: 'bx bx-bell', badge: '5' },
    { id: 'profile', name: 'Profile', icon: 'bx bx-user' }
  ])
  .setOnItemSelect((id) => navigateTo(id))
  .setItemColor('#6750a4')
  .show();

// Update badge dynamically
bottomNav.setBadge('notif', '10');

const { MaterialToolbar, MaterialDrawer } = AndroidComponents;

const drawer = MaterialDrawer({ /* ... */ });

const toolbar = MaterialToolbar({
  title: 'My App',
  navigationIcon: 'bx bx-menu',
  onNavigationClick: () => drawer.open(),
  actions: [
    { icon: 'bx bx-search', onClick: () => openSearch() },
    { icon: 'bx bx-bell', badge: '3', onClick: () => openNotifs() }
  ],
  overflowMenu: [
    { text: 'Settings', icon: 'bx bx-cog', onClick: () => openSettings() },
    { text: 'About', icon: 'bx bx-info-circle', onClick: () => showAbout() }
  ]
});

const { MaterialDrawer } = AndroidComponents;

const drawer = MaterialDrawer({
  header: { title: 'My App', subtitle: 'user@example.com' },
  items: [
    { type: 'section', title: 'Main', items: [
      { id: 'home', text: 'Home', icon: 'bx bx-home' },
      { id: 'inbox', text: 'Inbox', icon: 'bx bx-inbox', badge: '5' }
    ]},
    { type: 'divider' },
    { type: 'section', title: 'Settings', items: [
      { id: 'settings', text: 'Settings', icon: 'bx bx-cog' }
    ]}
  ],
  onItemClick: (id) => navigateTo(id)
});

drawer.open();  // Open drawer
drawer.close(); // Close drawer

const { MaterialDialog } = AndroidComponents;

// Simple alert
MaterialDialog.alert('Success', 'Your changes have been saved!');

// Confirmation dialog
MaterialDialog.confirm('Delete Item', 'This action cannot be undone.', {
  confirmText: 'Delete',
  confirmStyle: 'filled',
  confirmError: true,
  onConfirm: () => deleteItem()
});

// Prompt dialog
MaterialDialog.prompt('Rename', 'Enter a new name:', {
  placeholder: 'New name',
  defaultValue: 'Document',
  onConfirm: (value) => rename(value)
});

// Builder pattern with custom content
MaterialDialog({ icon: 'bx bx-cog' })
  .setTitle('Settings')
  .setView(settingsForm)
  .setNegativeButton('Cancel')
  .setPositiveButton('Save', saveSettings, { style: 'filled' })
  .show();

const { Snackbar } = AndroidComponents;

// Simple message
Snackbar.show('Item added to cart');

// Success notification
Snackbar.success('Changes saved successfully!');

// Error notification
Snackbar.error('Failed to connect to server');

// With action button
Snackbar({
  message: 'Email archived',
  action: {
    text: 'Undo',
    onClick: () => undoArchive()
  },
  duration: 6000,
  showClose: true
}).show();