1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{
"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-08-19T07:27:29.655Z",
"updated": "2026-10-17T18:13:15.959Z",
"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:Label:command btn:Label2:cmd2 ...\n - Example: floating-add menu tools \"🔧 Tools\" btn:Help:help btn:Clear:clear\n - Click header to expand/collapse. State persists.\n - Items use TWO colons: btn:Label:command (a ONE-colon item like btn:Files is dropped by the parser)\n - Multi-word labels/commands must be quoted: btn:\"My Files\":\"ai-config confirm-timeout 0\" (verified live)\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"
}
|
