Properties4
60KelyphosDemo is the companion application included in the Kelyphos repository. It demonstrates KelyphosKit in practice, serves as a visual HIG component catalogue, and ships a WidgetKit extension in all four sizes.
Running the Demo
# From the Kelyphos repository root
pixi run build
open ~/Library/Developer/Xcode/DerivedData/Kelyphos-*/Build/Products/Debug/KelyphosDemo.app
Or open Kelyphos.xcodeproj in Xcode and run the KelyphosDemo scheme on an iPad or Mac target.
KelyphosDemo scheme.Application Structure
KelyphosDemo is itself a KelyphosShellView app. Navigator tabs are sections of the HIG catalogue. The inspector shows component metadata. The utility area hosts settings and appearance controls.
KelyphosShellView(
state: shellState,
configuration: KelyphosShellConfiguration(
navigatorTabs: Array(DemoNavigatorTab.allCases),
inspectorTabs: Array(DemoInspectorTab.allCases),
utilityTabs: Array(DemoUtilityTab.allCases),
detail: { DemoContentView() }
)
)
.commands { KelyphosCommands(state: shellState) }
HIG Component Pages (34 pages across 8 sections)
Components (8 pages)
Interactive demonstrations of macOS and iPadOS controls:
| Page | What it shows |
|---|---|
| Buttons | Button, .bordered, .borderedProminent, .plain, destructive styles |
| Context Menus | Right-click menus, custom actions, conditional items |
| Dock Menus | NSApplication.dockTile, dynamic Dock menu construction |
| Edit Menus | Undo/redo, cut/copy/paste integration |
| Menus | Menu, MenuButton, dynamic menu building |
| Popup Buttons | Picker with .menu style — single selection |
| Pulldown Buttons | Multi-action buttons with attached menu |
| Toolbars | ToolbarItem, ToolbarItemGroup, flexible spacers |
Presentation (7 pages)
Overlay and sheet patterns:
| Page | What it shows |
|---|---|
| Action Sheets | .confirmationDialog — destructive confirmations |
| Alerts | .alert — errors, warnings, informational |
| Page Controls | TabView paging, programmatic page selection |
| Panels | Non-modal floating panels via NSPanel |
| Popovers | .popover attached to views, arrow direction |
| Scroll Views | ScrollView, LazyVStack, pinned headers |
| Sheets | .sheet, .fullScreenCover, presentationDetents |
Navigation & Search (4 pages)
| Page | What it shows |
|---|---|
| Path Controls | File path display with NSPathControl |
| Search Fields | .searchable, isSearching, debounced queries |
| Tab Bars | TabView with .tabViewStyle(.sidebarAdaptable) |
| Token Fields | Tag-style entry with token removal |
Selection & Input (12 pages)
| Page | What it shows |
|---|---|
| Color Wells | ColorPicker, NSColorWell |
| Combo Boxes | Editable ComboBox with suggestion list |
| Digit Entry | Numeric TextField with formatters |
| Font Chooser | KelyphosFontChooser — the built-in font picker |
| Image Wells | Drag-and-drop image input via PhotosPicker |
| Pickers | Picker with .wheel, .segmented, .radioGroup |
| Segmented Controls | Multi-segment selection, mixed states |
| Sliders | Continuous and discrete Slider, tick marks |
| Steppers | Stepper with bound value and format |
| Text Fields | TextField, SecureField, prompts, validation |
| Toggles | Toggle in checkbox, switch, and button styles |
| Virtual Keyboard | On-screen keyboard overlay |
Status (3 pages)
| Page | What it shows |
|---|---|
| Gauges | Gauge — arc and linear, capacity style |
| Progress Indicators | ProgressView — determinate and indeterminate |
| Rating Indicators | Star ratings using SF Symbols |
System Experience (2 pages)
| Page | What it shows |
|---|---|
| Notifications | UserNotifications — authorization, scheduling, categories |
| Widgets | WidgetKit — live preview of all four widget sizes |
Content (2 pages)
| Page | What it shows |
|---|---|
| Charts | Swift Charts — bar, line, area with annotations |
| Image Views | AsyncImage, Image, phase-based loading states |
Settings (1 page)
| Page | What it shows |
|---|---|
| Kelyphos Settings | KelyphosSettingsView — appearance, font, and keybinding controls |
Togglable Content Column
The main demo window supports a togglable three-column layout. When enabled via Cmd+Shift+0 or the toolbar button, the navigator shows only section titles, and a content column appears between the navigator and detail showing the items within the selected section.
KelyphosShellConfiguration(
navigatorTabs: DemoNavigatorTab.allCases.map { $0 },
inspectorTabs: DemoInspectorTab.allCases.map { $0 },
utilityTabs: DemoUtilityTab.allCases.map { $0 },
content: { DemoContentColumnView() },
detail: { DemoContentView() }
)
The content: builder adds a middle column between the navigator and the detail area — suitable for master/detail/detail layouts like mail, notes, or document browsers. Toggle with state.contentColumnVisible.
Desktop Widget
The KelyphosWidget extension ships with the demo. It displays in four sizes:
| Size | Content |
|---|---|
| Small | Framework name + tagline |
| Medium | Name + primary feature highlights |
| Large | Full feature grid |
| Extra Large | Expanded feature grid with descriptions |
Widget content is refreshed on a timeline provider. The widget is registered automatically by pixi run run via lsregister + pluginkit -a.