Feature: add a compact density mode for efficiency-focused layouts

[wybaby168]

Summary

Add a more compact layout/density option for File Viewer surfaces, especially the demo shell, archive file list, nested preview header, and toolbar areas.

Customer feedback

This is an efficiency-oriented tool. The current gap and padding make the UI feel less data-dense. Try using a max gap of 2-5px, max padding of 5px, and 2-3px padding for small elements. The visual feel should improve a lot.

Reference screenshot

Proposed behavior

Introduce a compact density path that makes operational UI feel more like a high-efficiency file/data tool:

• Reduce spacing in toolbars, file metadata rows, archive entry lists, nested preview headers, and compact buttons.
• Prefer gap values around 2-5px for dense control clusters.
• Prefer padding up to 5px for common controls, and 2-3px for small icon/action elements.
• Keep document/content rendering readable; the density change should mostly affect the app shell and control chrome.
• Preserve touch usability on mobile, possibly by applying different density tokens for pointer-coarse devices.

Suggested API / implementation direction

• Add density tokens such as comfortable and compact instead of one-off spacing overrides.
• Consider an option like:

createFileViewer(container, {
  ui: {
    density: 'compact',
  },
})

• Demo can default to the more compact operational feel if it remains visually polished.

Acceptance criteria

• Archive preview and nested file preview headers use a visibly more compact layout.
• File list rows, badges, small buttons, search inputs, and tool groups use consistent compact spacing tokens.
• Text remains readable and does not overlap or clip at desktop and mobile widths.
• The compact mode is documented and covered by at least one visual/browser smoke check.
• Existing comfortable/default spacing remains available if this is introduced as an option.