{
  "name": "floating-ui",
  "description": "How to create, manage, and remove floating UI elements — buttons, collapsible menus, and status panels that persist across page reloads",
  "tags": [
    "floating",
    "ui",
    "buttons",
    "menu",
    "gui"
  ],
  "category": "ui",
  "created": "2026-06-22T19:02:49.950Z",
  "updated": "2026-06-22T19:02:49.950Z",
  "content": "---\nname: floating-ui\ndescription: How to create, manage, and remove floating UI elements — buttons, collapsible menus, and status panels that persist across page reloads\ntags: [floating, ui, buttons, menu, gui]\ncategory: ui\n---\n## Commands\n\n1. **Create a floating button:**\n   - floating-add btn <id> <label> <command>\n   - Example: floating-add btn files \"📁 Files\" ls\n   - Button appears at bottom-right, persists across reloads\n\n2. **Create a collapsible menu:**\n   - floating-add menu <id> <label> btn:SubLabel|command btn:Sub2|cmd2 ...\n   - Example: floating-add menu tools \"🔧 Tools\" btn:Help|help btn:Clear|clear\n   - Click header to expand/collapse. State persists.\n\n3. **Create a text panel:**\n   - floating-add panel <id> <title> <content>\n   - Example: floating-add panel status \"📊 Status\" \"CPU: 2%\"\n\n4. **Manage elements:**\n   - floating-list — show all elements with IDs and positions\n   - floating-remove <id> — delete by ID\n   - floating-toggle <id> — show/hide without deleting\n   - floating-pos <id> x|auto y|auto — reposition or reset to auto\n   - floating-clear — remove everything\n\n5. **Persistence:**\n   - All elements auto-save to localStorage (webx11_floating_elements)\n   - Survive page reload, browser restart\n   - Run floating-clear to start fresh\n\n## When to use\n- User wants quick-access buttons instead of typing commands\n- User says \"add a button for X\", \"make a shortcut\", \"floating menu\"\n- Creating a dashboard with status panels and action buttons"
}