From ba78468a6740dcaf9f0ee94313ae133790ca8240 Mon Sep 17 00:00:00 2001 From: phranck Date: Thu, 29 Jan 2026 02:04:38 +0000 Subject: [PATCH] docs: Update DocC documentation --- docs/data/documentation/tuikit.json | 2 +- docs/data/documentation/tuikit/appearance.json | 2 +- docs/data/documentation/tuikit/architecture.json | 2 +- docs/data/documentation/tuikit/buildinteractivemenu.json | 2 +- docs/data/documentation/tuikit/buildthemableui.json | 2 +- docs/data/documentation/tuikit/buildyourfirstapp.json | 2 +- docs/data/documentation/tuikit/focus.json | 2 +- docs/data/documentation/tuikit/gettingstarted.json | 2 +- docs/data/documentation/tuikit/modifiers.json | 2 +- docs/data/documentation/tuikit/statemanagement.json | 2 +- docs/data/documentation/tuikit/theming.json | 2 +- docs/data/documentation/tuikit/viewhierarchy.json | 2 +- docs/documentation/tuikit/appearance/index.html | 2 +- docs/documentation/tuikit/architecture/index.html | 2 +- docs/documentation/tuikit/buildinteractivemenu/index.html | 2 +- docs/documentation/tuikit/buildthemableui/index.html | 2 +- docs/documentation/tuikit/buildyourfirstapp/index.html | 2 +- docs/documentation/tuikit/focus/index.html | 2 +- docs/documentation/tuikit/gettingstarted/index.html | 2 +- docs/documentation/tuikit/index.html | 2 +- docs/documentation/tuikit/modifiers/index.html | 2 +- docs/documentation/tuikit/statemanagement/index.html | 2 +- docs/documentation/tuikit/theming/index.html | 2 +- docs/documentation/tuikit/viewhierarchy/index.html | 2 +- docs/index.html | 2 +- docs/metadata.json | 2 +- 26 files changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/data/documentation/tuikit.json b/docs/data/documentation/tuikit.json index d0c7c97..e95e9ff 100644 --- a/docs/data/documentation/tuikit.json +++ b/docs/data/documentation/tuikit.json @@ -1 +1 @@ -{"metadata":{"role":"collection","title":"TUIKit"},"schemaVersion":{"major":0,"patch":0,"minor":3},"hierarchy":{"paths":[[]]},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"},"kind":"article","sections":[],"topicSections":[{"title":"Articles","anchor":"Articles","generated":true,"identifiers":["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp"]}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"role":"article","url":"\/documentation\/tuikit\/viewhierarchy","kind":"article","abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","title":"Understanding the View Hierarchy","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article","kind":"article","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"title":"Appearance System","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}],"url":"\/documentation\/tuikit\/theming","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","title":"Theming System"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"url":"\/documentation\/tuikit\/buildthemableui","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","title":"Building a Themable UI"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"abstract":[{"type":"text","text":"Learn how to manage application state and data flow in TUIKit."}],"title":"State Management","url":"\/documentation\/tuikit\/statemanagement","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","kind":"article","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"title":"Architecture Overview","abstract":[{"type":"text","text":"Understand the architecture and design patterns that power TUIKit."}],"url":"\/documentation\/tuikit\/architecture","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","role":"article","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}],"url":"\/documentation\/tuikit\/modifiers","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","title":"View Modifiers"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/GettingStarted":{"title":"Getting Started with TUIKit","type":"topic","url":"\/documentation\/tuikit\/gettingstarted","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","abstract":[{"text":"Create your first terminal user interface in minutes.","type":"text"}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Create a simple counter application to learn TUIKit basics."}],"title":"Building Your First App","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","role":"article","url":"\/documentation\/tuikit\/buildyourfirstapp"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"title":"Focus Management","abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"kind":"article","role":"article","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","url":"\/documentation\/tuikit\/focus"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"title":"Building an Interactive Menu","url":"\/documentation\/tuikit\/buildinteractivemenu","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","kind":"article","role":"article","abstract":[{"type":"text","text":"Create a navigation menu with keyboard shortcuts and status bar hints."}],"type":"topic"}}} \ No newline at end of file +{"metadata":{"title":"TUIKit","role":"collection"},"topicSections":[{"anchor":"Articles","identifiers":["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp"],"title":"Articles","generated":true}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"},"kind":"article","schemaVersion":{"major":0,"minor":3,"patch":0},"hierarchy":{"paths":[[]]},"sections":[],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"role":"article","title":"Building an Interactive Menu","type":"topic","kind":"article","url":"\/documentation\/tuikit\/buildinteractivemenu","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","abstract":[{"text":"Create a navigation menu with keyboard shortcuts and status bar hints.","type":"text"}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"kind":"article","title":"Theming System","url":"\/documentation\/tuikit\/theming","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"kind":"article","abstract":[{"text":"Create an application with dynamic theme switching and persistence.","type":"text"}],"title":"Building a Themable UI","url":"\/documentation\/tuikit\/buildthemableui","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/GettingStarted":{"abstract":[{"text":"Create your first terminal user interface in minutes.","type":"text"}],"kind":"article","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","title":"Getting Started with TUIKit","url":"\/documentation\/tuikit\/gettingstarted","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"role":"article","url":"\/documentation\/tuikit\/buildyourfirstapp","kind":"article","abstract":[{"text":"Create a simple counter application to learn TUIKit basics.","type":"text"}],"type":"topic","title":"Building Your First App","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"abstract":[{"text":"Understand the architecture and design patterns that power TUIKit.","type":"text"}],"kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","type":"topic","role":"article","title":"Architecture Overview","url":"\/documentation\/tuikit\/architecture"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"type":"topic","kind":"article","role":"article","title":"Appearance System","url":"\/documentation\/tuikit\/appearance"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"url":"\/documentation\/tuikit\/viewhierarchy","abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","kind":"article","title":"Understanding the View Hierarchy","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"title":"View Modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","url":"\/documentation\/tuikit\/modifiers","role":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"title":"Focus Management","role":"article","url":"\/documentation\/tuikit\/focus","type":"topic","kind":"article","abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/appearance.json b/docs/data/documentation/tuikit/appearance.json index 31509fb..069f5d6 100644 --- a/docs/data/documentation/tuikit/appearance.json +++ b/docs/data/documentation/tuikit/appearance.json @@ -1 +1 @@ -{"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","interfaceLanguage":"swift"},"kind":"article","primaryContentSections":[{"content":[{"type":"heading","text":"Overview","level":2,"anchor":"Overview"},{"type":"paragraph","inlineContent":[{"text":"TUIKit provides 5 appearance styles that control how borders and containers are rendered:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Line","type":"text"}]},{"text":": Simple ASCII lines","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Rounded"}]},{"text":": Rounded corners (default)","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"DoubleLine"}]},{"type":"text","text":": Double-line borders"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Heavy"}],"type":"strong"},{"text":": Heavy\/bold borders","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Block","type":"text"}]},{"text":": Half-block Unicode characters for solid appearance","type":"text"}]}]}]},{"type":"heading","text":"Appearance Styles","level":2,"anchor":"Appearance-Styles"},{"type":"heading","text":"Line Appearance","level":3,"anchor":"Line-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Simple single-line ASCII borders:"}]},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Content\")","}",".border(.line)"]},{"type":"paragraph","inlineContent":[{"text":"Characters used:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Horizontal: "},{"code":"-","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Vertical: "},{"type":"codeVoice","code":"|"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Corners: ","type":"text"},{"code":"+","type":"codeVoice"}]}]}]},{"type":"heading","text":"Rounded Appearance","level":3,"anchor":"Rounded-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Rounded corners (default appearance):"}]},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Content\")","}",".border(.rounded)"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Characters used:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Top-left: "},{"type":"codeVoice","code":"╭"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Top-right: ","type":"text"},{"code":"╮","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Bottom-left: "},{"code":"╰","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Bottom-right: "},{"code":"╯","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Horizontal: "},{"type":"codeVoice","code":"─"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Vertical: ","type":"text"},{"code":"│","type":"codeVoice"}]}]}]},{"type":"heading","text":"DoubleLine Appearance","level":3,"anchor":"DoubleLine-Appearance"},{"type":"paragraph","inlineContent":[{"text":"Double-line borders for emphasis:","type":"text"}]},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Content\")","}",".border(.doubleLine)"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Characters used:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Top-left: "},{"type":"codeVoice","code":"╔"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Top-right: "},{"code":"╗","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"text":"Bottom-left: ","type":"text"},{"code":"╚","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Bottom-right: "},{"type":"codeVoice","code":"╝"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Horizontal: "},{"type":"codeVoice","code":"═"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Vertical: ","type":"text"},{"code":"║","type":"codeVoice"}]}]}]},{"type":"heading","text":"Heavy Appearance","level":3,"anchor":"Heavy-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Bold\/heavy borders:"}]},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Content\")","}",".border(.heavy)"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Characters used:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Top-left: ","type":"text"},{"type":"codeVoice","code":"┏"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Top-right: ","type":"text"},{"type":"codeVoice","code":"┓"}]}]},{"content":[{"inlineContent":[{"text":"Bottom-left: ","type":"text"},{"code":"┗","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Bottom-right: ","type":"text"},{"code":"┛","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Horizontal: "},{"type":"codeVoice","code":"━"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Vertical: "},{"type":"codeVoice","code":"┃"}]}]}]},{"type":"heading","text":"Block Appearance","level":3,"anchor":"Block-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Modern half-block Unicode characters for a solid, integrated look:"}]},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Content\")","}",".border(.block)"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Special rendering:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Top border"}]},{"type":"text","text":": "},{"type":"codeVoice","code":"▄"},{"type":"text","text":" (lower half-block) with foreground = container background"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Side borders"}],"type":"strong"},{"text":": ","type":"text"},{"code":"█","type":"codeVoice"},{"text":" (full block) with foreground = container background","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Bottom border","type":"text"}],"type":"strong"},{"text":": ","type":"text"},{"code":"▀","type":"codeVoice"},{"text":" (upper half-block) with foreground = container background","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Content","type":"text"}],"type":"strong"},{"text":": Filled with container background color","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Uses full-block characters to create solid visual edges","type":"text"}],"type":"paragraph"}]}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"The block appearance creates a seamless, filled container that appears integrated with the terminal background."}]},{"type":"heading","text":"Setting Global Appearance","level":2,"anchor":"Setting-Global-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use the appearance environment to set the default for all components:"}]},{"type":"codeListing","syntax":"swift","code":["@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.appearance, .block)"," }"," }","}"]},{"type":"heading","text":"Cycling Appearances","level":2,"anchor":"Cycling-Appearances"},{"type":"paragraph","inlineContent":[{"type":"text","text":"The example app supports appearance cycling with the "},{"type":"codeVoice","code":"a"},{"type":"text","text":" key:"}]},{"type":"codeListing","syntax":"swift","code":["@main","struct ExampleApp: App {"," @State private var currentAppearance: Appearance = .rounded",""," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.appearance, currentAppearance)"," .statusBarItems {"," StatusBarItem("," label: \"Appearance\","," shortcut: Shortcut.letter(\"a\"),"," action: {"," currentAppearance = currentAppearance.next()"," }"," )"," }"," }"," }","}"]},{"type":"heading","text":"Using Appearance with Containers","level":2,"anchor":"Using-Appearance-with-Containers"},{"type":"paragraph","inlineContent":[{"type":"text","text":"All container views respect the appearance setting:"}]},{"type":"codeListing","syntax":"swift","code":["\/\/ Using Panel with different appearances","VStack {"," Panel(title: \"Settings\") {"," Text(\"Configure options here\")"," }"," .border(.rounded)",""," Panel(title: \"Status\") {"," Text(\"System information\")"," }"," .border(.block)",""," Card {"," Text(\"Card content\")"," }"," .border(.heavy)","}"]},{"type":"heading","text":"BorderStyle","level":2,"anchor":"BorderStyle"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use the "},{"type":"codeVoice","code":"BorderStyle"},{"type":"text","text":" type to customize individual borders:"}]},{"type":"codeListing","syntax":"swift","code":["extension View {"," func border("," _ style: BorderStyle = .default,"," width: Int = 1,"," color: Color = .theme.border,"," appearance: Appearance = .rounded"," ) -> some View {"," \/\/ Returns bordered view"," }","}","","\/\/ Custom border","Text(\"Custom border\")"," .border(.custom, width: 2, color: .theme.accent)"]},{"type":"heading","text":"Appearance in Components","level":2,"anchor":"Appearance-in-Components"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Different components use appearance differently:"}]},{"type":"heading","text":"Text with Border","level":3,"anchor":"Text-with-Border"},{"type":"codeListing","syntax":"swift","code":["Text(\"Bordered text\")"," .border(.block)"]},{"type":"heading","text":"Card with Appearance","level":3,"anchor":"Card-with-Appearance"},{"type":"codeListing","syntax":"swift","code":["Card {"," Text(\"Content\")","}",".border(.rounded)"]},{"type":"heading","text":"Panel with Title","level":3,"anchor":"Panel-with-Title"},{"type":"codeListing","syntax":"swift","code":["Panel(title: \"Title\") {"," Text(\"Content\")","}",".border(.block)"]},{"type":"heading","text":"Alerts and Dialogs","level":3,"anchor":"Alerts-and-Dialogs"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Alerts automatically use the current appearance:"}]},{"type":"codeListing","syntax":"swift","code":["Alert("," title: \"Confirm\","," message: \"Are you sure?\","," borderColor: .theme.border,"," titleColor: .theme.accent",")"]},{"type":"heading","text":"Best Practices","level":2,"anchor":"Best-Practices"},{"type":"orderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Consistency","type":"text"}]},{"text":": Choose one appearance and stick with it","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Theme integration"}]},{"type":"text","text":": Use theme colors for borders"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Readability","type":"text"}]},{"type":"text","text":": Ensure sufficient contrast for borders"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Performance"}],"type":"strong"},{"text":": Complex borders render efficiently","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Testing","type":"text"}],"type":"strong"},{"text":": Test appearance on various terminal sizes","type":"text"}]}]}]},{"type":"heading","text":"Related Topics","level":2,"anchor":"Related-Topics"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Appearance"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"BorderStyle"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/border(_:style:)-4xzvw","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"reference"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"Panel","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"Card","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"ContainerView","type":"codeVoice"}],"type":"paragraph"}]}]}],"kind":"content"}],"metadata":{"roleHeading":"Article","role":"article","title":"Appearance System"},"sections":[],"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"schemaVersion":{"patch":0,"major":0,"minor":3},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"title":"Theming System","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","role":"article","url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}]}}} \ No newline at end of file +{"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","interfaceLanguage":"swift"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"kind":"article","metadata":{"roleHeading":"Article","role":"article","title":"Appearance System"},"primaryContentSections":[{"content":[{"type":"heading","level":2,"text":"Overview","anchor":"Overview"},{"inlineContent":[{"type":"text","text":"TUIKit provides 5 appearance styles that control how borders and containers are rendered:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Line"}]},{"text":": Simple ASCII lines","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Rounded"}]},{"type":"text","text":": Rounded corners (default)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"DoubleLine","type":"text"}]},{"type":"text","text":": Double-line borders"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Heavy","type":"text"}]},{"text":": Heavy\/bold borders","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Block","type":"text"}],"type":"strong"},{"text":": Half-block Unicode characters for solid appearance","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"type":"heading","level":2,"text":"Appearance Styles","anchor":"Appearance-Styles"},{"type":"heading","level":3,"text":"Line Appearance","anchor":"Line-Appearance"},{"inlineContent":[{"text":"Simple single-line ASCII borders:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Content\")","}",".border(.line)"]},{"inlineContent":[{"type":"text","text":"Characters used:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"text":"Horizontal: ","type":"text"},{"code":"-","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Vertical: ","type":"text"},{"type":"codeVoice","code":"|"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Corners: "},{"type":"codeVoice","code":"+"}]}]}],"type":"unorderedList"},{"type":"heading","level":3,"text":"Rounded Appearance","anchor":"Rounded-Appearance"},{"inlineContent":[{"type":"text","text":"Rounded corners (default appearance):"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Content\")","}",".border(.rounded)"]},{"inlineContent":[{"type":"text","text":"Characters used:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Top-left: ","type":"text"},{"type":"codeVoice","code":"╭"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Top-right: ","type":"text"},{"type":"codeVoice","code":"╮"}]}]},{"content":[{"inlineContent":[{"text":"Bottom-left: ","type":"text"},{"code":"╰","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Bottom-right: "},{"type":"codeVoice","code":"╯"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Horizontal: ","type":"text"},{"code":"─","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Vertical: "},{"type":"codeVoice","code":"│"}],"type":"paragraph"}]}]},{"level":3,"text":"DoubleLine Appearance","type":"heading","anchor":"DoubleLine-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Double-line borders for emphasis:"}]},{"code":["VStack {"," Text(\"Content\")","}",".border(.doubleLine)"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Characters used:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Top-left: "},{"type":"codeVoice","code":"╔"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Top-right: ","type":"text"},{"code":"╗","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Bottom-left: "},{"type":"codeVoice","code":"╚"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Bottom-right: ","type":"text"},{"code":"╝","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"text":"Horizontal: ","type":"text"},{"type":"codeVoice","code":"═"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Vertical: "},{"type":"codeVoice","code":"║"}]}]}]},{"level":3,"text":"Heavy Appearance","type":"heading","anchor":"Heavy-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Bold\/heavy borders:"}]},{"code":["VStack {"," Text(\"Content\")","}",".border(.heavy)"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Characters used:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Top-left: "},{"code":"┏","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Top-right: "},{"code":"┓","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Bottom-left: ","type":"text"},{"type":"codeVoice","code":"┗"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Bottom-right: "},{"type":"codeVoice","code":"┛"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Horizontal: "},{"type":"codeVoice","code":"━"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Vertical: ","type":"text"},{"code":"┃","type":"codeVoice"}],"type":"paragraph"}]}]},{"level":3,"text":"Block Appearance","type":"heading","anchor":"Block-Appearance"},{"type":"paragraph","inlineContent":[{"text":"Modern half-block Unicode characters for a solid, integrated look:","type":"text"}]},{"code":["VStack {"," Text(\"Content\")","}",".border(.block)"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Special rendering:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Top border","type":"text"}],"type":"strong"},{"type":"text","text":": "},{"code":"▄","type":"codeVoice"},{"type":"text","text":" (lower half-block) with foreground = container background"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Side borders","type":"text"}]},{"type":"text","text":": "},{"type":"codeVoice","code":"█"},{"type":"text","text":" (full block) with foreground = container background"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Bottom border"}],"type":"strong"},{"text":": ","type":"text"},{"code":"▀","type":"codeVoice"},{"text":" (upper half-block) with foreground = container background","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Content","type":"text"}]},{"type":"text","text":": Filled with container background color"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Uses full-block characters to create solid visual edges","type":"text"}]}]}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"The block appearance creates a seamless, filled container that appears integrated with the terminal background."}]},{"level":2,"text":"Setting Global Appearance","type":"heading","anchor":"Setting-Global-Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use the appearance environment to set the default for all components:"}]},{"code":["@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.appearance, .block)"," }"," }","}"],"type":"codeListing","syntax":"swift"},{"level":2,"text":"Cycling Appearances","type":"heading","anchor":"Cycling-Appearances"},{"type":"paragraph","inlineContent":[{"text":"The example app supports appearance cycling with the ","type":"text"},{"code":"a","type":"codeVoice"},{"text":" key:","type":"text"}]},{"code":["@main","struct ExampleApp: App {"," @State private var currentAppearance: Appearance = .rounded",""," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.appearance, currentAppearance)"," .statusBarItems {"," StatusBarItem("," label: \"Appearance\","," shortcut: Shortcut.letter(\"a\"),"," action: {"," currentAppearance = currentAppearance.next()"," }"," )"," }"," }"," }","}"],"type":"codeListing","syntax":"swift"},{"level":2,"text":"Using Appearance with Containers","type":"heading","anchor":"Using-Appearance-with-Containers"},{"type":"paragraph","inlineContent":[{"type":"text","text":"All container views respect the appearance setting:"}]},{"code":["\/\/ Using Panel with different appearances","VStack {"," Panel(title: \"Settings\") {"," Text(\"Configure options here\")"," }"," .border(.rounded)",""," Panel(title: \"Status\") {"," Text(\"System information\")"," }"," .border(.block)",""," Card {"," Text(\"Card content\")"," }"," .border(.heavy)","}"],"type":"codeListing","syntax":"swift"},{"level":2,"text":"BorderStyle","type":"heading","anchor":"BorderStyle"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use the "},{"type":"codeVoice","code":"BorderStyle"},{"type":"text","text":" type to customize individual borders:"}]},{"code":["extension View {"," func border("," _ style: BorderStyle = .default,"," width: Int = 1,"," color: Color = .theme.border,"," appearance: Appearance = .rounded"," ) -> some View {"," \/\/ Returns bordered view"," }","}","","\/\/ Custom border","Text(\"Custom border\")"," .border(.custom, width: 2, color: .theme.accent)"],"type":"codeListing","syntax":"swift"},{"level":2,"text":"Appearance in Components","type":"heading","anchor":"Appearance-in-Components"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Different components use appearance differently:"}]},{"level":3,"text":"Text with Border","type":"heading","anchor":"Text-with-Border"},{"code":["Text(\"Bordered text\")"," .border(.block)"],"type":"codeListing","syntax":"swift"},{"level":3,"text":"Card with Appearance","type":"heading","anchor":"Card-with-Appearance"},{"code":["Card {"," Text(\"Content\")","}",".border(.rounded)"],"type":"codeListing","syntax":"swift"},{"level":3,"text":"Panel with Title","type":"heading","anchor":"Panel-with-Title"},{"code":["Panel(title: \"Title\") {"," Text(\"Content\")","}",".border(.block)"],"type":"codeListing","syntax":"swift"},{"level":3,"text":"Alerts and Dialogs","type":"heading","anchor":"Alerts-and-Dialogs"},{"type":"paragraph","inlineContent":[{"text":"Alerts automatically use the current appearance:","type":"text"}]},{"code":["Alert("," title: \"Confirm\","," message: \"Are you sure?\","," borderColor: .theme.border,"," titleColor: .theme.accent",")"],"type":"codeListing","syntax":"swift"},{"level":2,"text":"Best Practices","type":"heading","anchor":"Best-Practices"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Consistency","type":"text"}],"type":"strong"},{"text":": Choose one appearance and stick with it","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Theme integration"}],"type":"strong"},{"type":"text","text":": Use theme colors for borders"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Readability"}]},{"type":"text","text":": Ensure sufficient contrast for borders"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Performance"}]},{"type":"text","text":": Complex borders render efficiently"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Testing","type":"text"}],"type":"strong"},{"text":": Test appearance on various terminal sizes","type":"text"}]}]}]},{"level":2,"text":"Related Topics","type":"heading","anchor":"Related-Topics"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"codeVoice","code":"Appearance"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"BorderStyle","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"code":"View\/border(_:style:)-4xzvw","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","isActive":true}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Panel"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Card","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"ContainerView","type":"codeVoice"}]}]}]}],"kind":"content"}],"schemaVersion":{"minor":3,"patch":0,"major":0},"sections":[],"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"kind":"article","title":"Theming System","url":"\/documentation\/tuikit\/theming","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/architecture.json b/docs/data/documentation/tuikit/architecture.json index c54279e..565f299 100644 --- a/docs/data/documentation/tuikit/architecture.json +++ b/docs/data/documentation/tuikit/architecture.json @@ -1 +1 @@ -{"kind":"article","hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","interfaceLanguage":"swift"},"schemaVersion":{"patch":0,"major":0,"minor":3},"abstract":[{"type":"text","text":"Understand the architecture and design patterns that power TUIKit."}],"primaryContentSections":[{"content":[{"level":2,"anchor":"Core-Design-Principles","type":"heading","text":"Core Design Principles"},{"inlineContent":[{"type":"text","text":"TUIKit follows these key principles:"}],"type":"paragraph"},{"type":"orderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Declarative UI","type":"text"}]},{"type":"text","text":": Describe what you want, not how to build it"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Composability"}]},{"type":"text","text":": Build complex UIs from simple, reusable components"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Value Semantics"}],"type":"strong"},{"text":": Views are lightweight value types, not stateful objects","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Data Flow","type":"text"}]},{"type":"text","text":": Clear, unidirectional data flow through Environment and State"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Pure Swift","type":"text"}],"type":"strong"},{"text":": No external dependencies or C bindings","type":"text"}]}]}]},{"level":2,"anchor":"The-View-System","type":"heading","text":"The View System"},{"level":3,"anchor":"View-Protocol","type":"heading","text":"View Protocol"},{"inlineContent":[{"text":"The ","type":"text"},{"code":"View","type":"codeVoice"},{"text":" protocol is the foundation of TUIKit:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"]},{"inlineContent":[{"type":"text","text":"Views are "},{"type":"strong","inlineContent":[{"type":"text","text":"not"}]},{"type":"text","text":" UI elements—they’re descriptions of UI that get rendered when needed. This enables:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Lightweight composition"}]}]},{"content":[{"inlineContent":[{"text":"Efficient updates","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Declarative syntax"}],"type":"paragraph"}]}]},{"level":3,"anchor":"Primitive-vs-Composite-Views","type":"heading","text":"Primitive vs Composite Views"},{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Primitive Views"}]},{"text":" directly render content:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Conform to ","type":"text"},{"type":"codeVoice","code":"Renderable"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Have "},{"code":"body: Never","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Examples: "},{"type":"codeVoice","code":"Text"},{"type":"text","text":", "},{"type":"codeVoice","code":"Button"},{"type":"text","text":", "},{"type":"codeVoice","code":"Menu"}],"type":"paragraph"}]}]},{"inlineContent":[{"inlineContent":[{"type":"text","text":"Composite Views"}],"type":"strong"},{"text":" combine other views:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Define a "},{"code":"body","type":"codeVoice"},{"type":"text","text":" property"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Renderer walks the tree recursively","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Examples: ","type":"text"},{"type":"codeVoice","code":"VStack"},{"text":", ","type":"text"},{"type":"codeVoice","code":"HStack"},{"text":", ","type":"text"},{"type":"codeVoice","code":"Card"}],"type":"paragraph"}]}]},{"level":3,"anchor":"Rendering-Pipeline","type":"heading","text":"Rendering Pipeline"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"View Tree","type":"text"}]},{"type":"text","text":": User creates view hierarchy"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Traversal"}]},{"type":"text","text":": Renderer walks tree depth-first"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Rendering","type":"text"}]},{"type":"text","text":": Primitive views produce "},{"code":"FrameBuffer","type":"codeVoice"},{"type":"text","text":" character data"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Compositing","type":"text"}]},{"type":"text","text":": Overlays blend on top with character-level precision"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Output"}],"type":"strong"},{"text":": Terminal renders the final buffer","type":"text"}],"type":"paragraph"}]}]},{"level":2,"anchor":"State-Management-Architecture","type":"heading","text":"State Management Architecture"},{"level":3,"anchor":"Local-State-State","type":"heading","text":"Local State (@State)"},{"inlineContent":[{"type":"text","text":"Stored in the view itself:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["@State var count: Int = 0"]},{"inlineContent":[{"type":"text","text":"When "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" changes, the view re-renders automatically."}],"type":"paragraph"},{"level":3,"anchor":"Environment-Top-Down","type":"heading","text":"Environment (Top-Down)"},{"inlineContent":[{"text":"Parent views pass data to children:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["@Environment(\\.theme) var theme","","\/\/ Theme flows from App → all children"]},{"level":3,"anchor":"Preferences-Bottom-Up","type":"heading","text":"Preferences (Bottom-Up)"},{"inlineContent":[{"text":"Children can propagate values to parents (rarely used in TUIKit).","type":"text"}],"type":"paragraph"},{"level":3,"anchor":"Storage-AppStorage-SceneStorage","type":"heading","text":"Storage (@AppStorage, @SceneStorage)"},{"inlineContent":[{"type":"text","text":"Persistent storage via:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"@AppStorage"}],"type":"strong"},{"type":"text","text":": UserDefaults (macOS) or JSON file (Linux)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"@SceneStorage"}]},{"type":"text","text":": Per-scene state restoration"}]}]}]},{"level":2,"anchor":"Data-Flow-Pattern","type":"heading","text":"Data Flow Pattern"},{"type":"codeListing","syntax":null,"code":["┌─────────────────────────────────────┐","│ App or Scene │","│ @AppStorage, @State, Environment │","└────────┬────────────────────────────┘"," │ passes theme, data"," ▼","┌─────────────────────────────────────┐","│ Composite Views (VStack, etc) │","│ pass Environment to children │","└────────┬────────────────────────────┘"," │ may use @State locally"," ▼","┌─────────────────────────────────────┐","│ Primitive Views (Text, Button) │","│ render to FrameBuffer │","└─────────────────────────────────────┘"]},{"level":2,"anchor":"Theme-and-Appearance-System","type":"heading","text":"Theme and Appearance System"},{"level":3,"anchor":"Theme-Protocol","type":"heading","text":"Theme Protocol"},{"inlineContent":[{"type":"text","text":"Defines semantic colors:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["public protocol Theme {"," var background: Color { get }"," var accent: Color { get }"," \/\/ ... other colors","}"]},{"level":3,"anchor":"Appearance-Protocol","type":"heading","text":"Appearance Protocol"},{"inlineContent":[{"type":"text","text":"Defines structural styles:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["public enum Appearance {"," case line, rounded, doubleLine, heavy, block","}"]},{"inlineContent":[{"type":"text","text":"Both are passed through Environment, enabling:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Global theme switching","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Dynamic appearance changes"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Consistent styling across app"}]}]}]},{"level":2,"anchor":"Focus-Management-System","type":"heading","text":"Focus Management System"},{"inlineContent":[{"code":"FocusManager","type":"codeVoice"},{"text":" tracks which element has keyboard focus:","type":"text"}],"type":"paragraph"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Focus ID","type":"text"}],"type":"strong"},{"text":": Each interactive element has a unique ID","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Navigation"}],"type":"strong"},{"type":"text","text":": Tab\/Shift+Tab moves focus"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Rendering"}],"type":"strong"},{"text":": Focused element shows visual indicator","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Events","type":"text"}],"type":"strong"},{"text":": Keyboard events route to focused element","type":"text"}]}]}]},{"type":"codeListing","syntax":"swift","code":["@Environment(\\.focusManager) var focusManager","","\/\/ Navigation automatically updates focusManager","\/\/ onKeyPress receives keyboard events"]},{"level":2,"anchor":"Modifier-System","type":"heading","text":"Modifier System"},{"inlineContent":[{"type":"text","text":"Modifiers wrap views to add behavior:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["extension View {"," func padding(_ amount: Int) -> some View {"," ModifiedView(content: self, modifier: PaddingModifier(amount))"," }","}"]},{"inlineContent":[{"text":"Modifiers compose:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Hello\")"," .bold() \/\/ Text → BoldView"," .padding(1) \/\/ BoldView → PaddedView"," .border(.rounded) \/\/ PaddedView → BorderedView"]},{"level":2,"anchor":"Component-Library","type":"heading","text":"Component Library"},{"level":3,"anchor":"Container-Views","type":"heading","text":"Container Views"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"VStack","type":"codeVoice"},{"text":", ","type":"text"},{"code":"HStack","type":"codeVoice"},{"text":", ","type":"text"},{"code":"ZStack","type":"codeVoice"},{"text":": Layout primitives","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Card"},{"type":"text","text":", "},{"type":"codeVoice","code":"Box"},{"type":"text","text":", "},{"type":"codeVoice","code":"Panel"},{"type":"text","text":": Styled containers"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"ContainerView","type":"codeVoice"},{"text":": Header\/body\/footer structure","type":"text"}]}]}]},{"level":3,"anchor":"Interactive-Views","type":"heading","text":"Interactive Views"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"Button","type":"codeVoice"},{"text":": Clickable button with focus","type":"text"}]}]},{"content":[{"inlineContent":[{"code":"Menu","type":"codeVoice"},{"text":": Selection menu with keyboard","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Alert","type":"codeVoice"},{"text":", ","type":"text"},{"code":"Dialog","type":"codeVoice"},{"text":": Modal overlays","type":"text"}]}]}]},{"level":3,"anchor":"Structural-Views","type":"heading","text":"Structural Views"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"code":"ForEach","type":"codeVoice"},{"type":"text","text":": Render collections"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Text"},{"type":"text","text":": Display text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Spacer"},{"text":", ","type":"text"},{"type":"codeVoice","code":"Divider"},{"text":": Layout helpers","type":"text"}]}]}]},{"level":3,"anchor":"Status-Bar","type":"heading","text":"Status Bar"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"StatusBar"},{"type":"text","text":": Application status bar"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"StatusBarItem"},{"type":"text","text":": Individual item"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Shortcut","type":"codeVoice"},{"text":": Keyboard shortcut display","type":"text"}]}]}]},{"level":2,"anchor":"Rendering-Engine","type":"heading","text":"Rendering Engine"},{"level":3,"anchor":"FrameBuffer","type":"heading","text":"FrameBuffer"},{"inlineContent":[{"text":"Character-level buffer for compositing:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"2D array of characters and attributes"}]}]},{"content":[{"inlineContent":[{"text":"Supports color, styling (bold, italic, etc.)","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Compositing for overlays"}],"type":"paragraph"}]}]},{"level":3,"anchor":"ANSI-Renderer","type":"heading","text":"ANSI Renderer"},{"inlineContent":[{"text":"Converts buffer to ANSI escape codes:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Color codes (foreground\/background)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Styling (bold, italic, underline)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Terminal state management"}]}]}]},{"level":3,"anchor":"Terminal-Abstraction","type":"heading","text":"Terminal Abstraction"},{"inlineContent":[{"type":"text","text":"Platform-specific terminal handling:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"macOS: termios","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Linux: termios via libc","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Raw mode, alternate screen, signal handling"}]}]}]},{"level":2,"anchor":"Performance-Considerations","type":"heading","text":"Performance Considerations"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Lazy Rendering"}]},{"type":"text","text":": Only visible areas render"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Diff Optimization"}],"type":"strong"},{"text":": Only changed areas redraw","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Buffer Reuse"}]},{"type":"text","text":": FrameBuffer recycled across frames"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"View Value Semantics","type":"text"}]},{"type":"text","text":": Lightweight copying and discarding"}],"type":"paragraph"}]}]},{"level":2,"anchor":"Error-Handling","type":"heading","text":"Error Handling"},{"inlineContent":[{"text":"TUIKit uses Swift’s error handling:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Fatal errors for programmer mistakes"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Non-fatal errors for recovery scenarios","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Storage backend errors are silenced (fallback to defaults)","type":"text"}],"type":"paragraph"}]}]},{"level":2,"anchor":"Platform-Support","type":"heading","text":"Platform Support"},{"level":3,"anchor":"macOS","type":"heading","text":"macOS"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Native UserDefaults for @AppStorage"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Full terminal support","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Modern Swift runtime","type":"text"}],"type":"paragraph"}]}]},{"level":3,"anchor":"Linux","type":"heading","text":"Linux"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"JSON file storage for @AppStorage"}]}]},{"content":[{"inlineContent":[{"text":"glibc-based terminal support","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"XDG paths for configuration","type":"text"}],"type":"paragraph"}]}]},{"level":2,"anchor":"Future-Extensibility","type":"heading","text":"Future Extensibility"},{"inlineContent":[{"type":"text","text":"The architecture supports:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Custom storage backends","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Custom themes"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Custom appearances"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Custom view components"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Animation system (planned)","type":"text"}],"type":"paragraph"}]}]},{"level":2,"anchor":"Related-Topics","type":"heading","text":"Related Topics"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"View","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Theme"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Appearance"}]}]},{"content":[{"inlineContent":[{"code":"FocusManager","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"FrameBuffer"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"doc:Rendering"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference","isActive":true}]}]}]}],"kind":"content"}],"metadata":{"title":"Architecture Overview","roleHeading":"Article","role":"article"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article","url":"\/documentation\/tuikit\/statemanagement","type":"topic","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","title":"State Management"}}} \ No newline at end of file +{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","interfaceLanguage":"swift"},"primaryContentSections":[{"kind":"content","content":[{"level":2,"anchor":"Core-Design-Principles","text":"Core Design Principles","type":"heading"},{"inlineContent":[{"type":"text","text":"TUIKit follows these key principles:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Declarative UI","type":"text"}],"type":"strong"},{"type":"text","text":": Describe what you want, not how to build it"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Composability"}]},{"type":"text","text":": Build complex UIs from simple, reusable components"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Value Semantics"}],"type":"strong"},{"text":": Views are lightweight value types, not stateful objects","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Data Flow","type":"text"}]},{"type":"text","text":": Clear, unidirectional data flow through Environment and State"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Pure Swift","type":"text"}],"type":"strong"},{"type":"text","text":": No external dependencies or C bindings"}]}]}],"type":"orderedList"},{"level":2,"anchor":"The-View-System","text":"The View System","type":"heading"},{"level":3,"anchor":"View-Protocol","text":"View Protocol","type":"heading"},{"inlineContent":[{"type":"text","text":"The "},{"code":"View","type":"codeVoice"},{"type":"text","text":" protocol is the foundation of TUIKit:"}],"type":"paragraph"},{"code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"type":"text","text":"Views are "},{"type":"strong","inlineContent":[{"type":"text","text":"not"}]},{"type":"text","text":" UI elements—they’re descriptions of UI that get rendered when needed. This enables:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Lightweight composition"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Efficient updates","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Declarative syntax"}]}]}],"type":"unorderedList"},{"level":3,"anchor":"Primitive-vs-Composite-Views","text":"Primitive vs Composite Views","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"Primitive Views","type":"text"}],"type":"strong"},{"text":" directly render content:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Conform to "},{"type":"codeVoice","code":"Renderable"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Have "},{"code":"body: Never","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Examples: ","type":"text"},{"code":"Text","type":"codeVoice"},{"text":", ","type":"text"},{"code":"Button","type":"codeVoice"},{"text":", ","type":"text"},{"code":"Menu","type":"codeVoice"}],"type":"paragraph"}]}],"type":"unorderedList"},{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Composite Views","type":"text"}]},{"type":"text","text":" combine other views:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Define a ","type":"text"},{"type":"codeVoice","code":"body"},{"text":" property","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Renderer walks the tree recursively"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Examples: "},{"type":"codeVoice","code":"VStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"HStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"Card"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":3,"anchor":"Rendering-Pipeline","text":"Rendering Pipeline","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"View Tree"}]},{"type":"text","text":": User creates view hierarchy"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Traversal"}]},{"type":"text","text":": Renderer walks tree depth-first"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Rendering","type":"text"}],"type":"strong"},{"type":"text","text":": Primitive views produce "},{"type":"codeVoice","code":"FrameBuffer"},{"type":"text","text":" character data"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Compositing"}],"type":"strong"},{"text":": Overlays blend on top with character-level precision","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Output","type":"text"}]},{"type":"text","text":": Terminal renders the final buffer"}]}]}],"type":"orderedList"},{"level":2,"anchor":"State-Management-Architecture","text":"State Management Architecture","type":"heading"},{"level":3,"anchor":"Local-State-State","text":"Local State (@State)","type":"heading"},{"inlineContent":[{"text":"Stored in the view itself:","type":"text"}],"type":"paragraph"},{"code":["@State var count: Int = 0"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"text":"When ","type":"text"},{"code":"@State","type":"codeVoice"},{"text":" changes, the view re-renders automatically.","type":"text"}],"type":"paragraph"},{"level":3,"anchor":"Environment-Top-Down","text":"Environment (Top-Down)","type":"heading"},{"inlineContent":[{"text":"Parent views pass data to children:","type":"text"}],"type":"paragraph"},{"code":["@Environment(\\.theme) var theme","","\/\/ Theme flows from App → all children"],"syntax":"swift","type":"codeListing"},{"level":3,"anchor":"Preferences-Bottom-Up","text":"Preferences (Bottom-Up)","type":"heading"},{"inlineContent":[{"type":"text","text":"Children can propagate values to parents (rarely used in TUIKit)."}],"type":"paragraph"},{"level":3,"anchor":"Storage-AppStorage-SceneStorage","text":"Storage (@AppStorage, @SceneStorage)","type":"heading"},{"inlineContent":[{"text":"Persistent storage via:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"@AppStorage","type":"text"}],"type":"strong"},{"text":": UserDefaults (macOS) or JSON file (Linux)","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"@SceneStorage"}],"type":"strong"},{"type":"text","text":": Per-scene state restoration"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"anchor":"Data-Flow-Pattern","text":"Data Flow Pattern","type":"heading"},{"code":["┌─────────────────────────────────────┐","│ App or Scene │","│ @AppStorage, @State, Environment │","└────────┬────────────────────────────┘"," │ passes theme, data"," ▼","┌─────────────────────────────────────┐","│ Composite Views (VStack, etc) │","│ pass Environment to children │","└────────┬────────────────────────────┘"," │ may use @State locally"," ▼","┌─────────────────────────────────────┐","│ Primitive Views (Text, Button) │","│ render to FrameBuffer │","└─────────────────────────────────────┘"],"syntax":null,"type":"codeListing"},{"level":2,"anchor":"Theme-and-Appearance-System","text":"Theme and Appearance System","type":"heading"},{"level":3,"anchor":"Theme-Protocol","text":"Theme Protocol","type":"heading"},{"inlineContent":[{"text":"Defines semantic colors:","type":"text"}],"type":"paragraph"},{"code":["public protocol Theme {"," var background: Color { get }"," var accent: Color { get }"," \/\/ ... other colors","}"],"syntax":"swift","type":"codeListing"},{"level":3,"anchor":"Appearance-Protocol","text":"Appearance Protocol","type":"heading"},{"inlineContent":[{"type":"text","text":"Defines structural styles:"}],"type":"paragraph"},{"code":["public enum Appearance {"," case line, rounded, doubleLine, heavy, block","}"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"text":"Both are passed through Environment, enabling:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Global theme switching"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Dynamic appearance changes","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Consistent styling across app"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"anchor":"Focus-Management-System","text":"Focus Management System","type":"heading"},{"inlineContent":[{"code":"FocusManager","type":"codeVoice"},{"text":" tracks which element has keyboard focus:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Focus ID","type":"text"}],"type":"strong"},{"text":": Each interactive element has a unique ID","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Navigation"}]},{"type":"text","text":": Tab\/Shift+Tab moves focus"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Rendering"}]},{"type":"text","text":": Focused element shows visual indicator"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Events"}],"type":"strong"},{"type":"text","text":": Keyboard events route to focused element"}]}]}],"type":"orderedList"},{"code":["@Environment(\\.focusManager) var focusManager","","\/\/ Navigation automatically updates focusManager","\/\/ onKeyPress receives keyboard events"],"syntax":"swift","type":"codeListing"},{"level":2,"anchor":"Modifier-System","text":"Modifier System","type":"heading"},{"inlineContent":[{"text":"Modifiers wrap views to add behavior:","type":"text"}],"type":"paragraph"},{"code":["extension View {"," func padding(_ amount: Int) -> some View {"," ModifiedView(content: self, modifier: PaddingModifier(amount))"," }","}"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"type":"text","text":"Modifiers compose:"}],"type":"paragraph"},{"code":["Text(\"Hello\")"," .bold() \/\/ Text → BoldView"," .padding(1) \/\/ BoldView → PaddedView"," .border(.rounded) \/\/ PaddedView → BorderedView"],"syntax":"swift","type":"codeListing"},{"level":2,"anchor":"Component-Library","text":"Component Library","type":"heading"},{"level":3,"anchor":"Container-Views","text":"Container Views","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"VStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"HStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"ZStack"},{"type":"text","text":": Layout primitives"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Card"},{"type":"text","text":", "},{"type":"codeVoice","code":"Box"},{"type":"text","text":", "},{"type":"codeVoice","code":"Panel"},{"type":"text","text":": Styled containers"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"ContainerView"},{"type":"text","text":": Header\/body\/footer structure"}]}]}],"type":"unorderedList"},{"level":3,"anchor":"Interactive-Views","text":"Interactive Views","type":"heading"},{"items":[{"content":[{"inlineContent":[{"type":"codeVoice","code":"Button"},{"type":"text","text":": Clickable button with focus"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"Menu","type":"codeVoice"},{"text":": Selection menu with keyboard","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"Alert","type":"codeVoice"},{"type":"text","text":", "},{"code":"Dialog","type":"codeVoice"},{"type":"text","text":": Modal overlays"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":3,"anchor":"Structural-Views","text":"Structural Views","type":"heading"},{"items":[{"content":[{"inlineContent":[{"type":"codeVoice","code":"ForEach"},{"type":"text","text":": Render collections"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Text"},{"type":"text","text":": Display text"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Spacer"},{"type":"text","text":", "},{"type":"codeVoice","code":"Divider"},{"type":"text","text":": Layout helpers"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":3,"anchor":"Status-Bar","text":"Status Bar","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"StatusBar"},{"text":": Application status bar","type":"text"}]}]},{"content":[{"inlineContent":[{"code":"StatusBarItem","type":"codeVoice"},{"type":"text","text":": Individual item"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Shortcut"},{"text":": Keyboard shortcut display","type":"text"}]}]}],"type":"unorderedList"},{"level":2,"anchor":"Rendering-Engine","text":"Rendering Engine","type":"heading"},{"level":3,"anchor":"FrameBuffer","text":"FrameBuffer","type":"heading"},{"inlineContent":[{"type":"text","text":"Character-level buffer for compositing:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"2D array of characters and attributes"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Supports color, styling (bold, italic, etc.)","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Compositing for overlays","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":3,"anchor":"ANSI-Renderer","text":"ANSI Renderer","type":"heading"},{"inlineContent":[{"type":"text","text":"Converts buffer to ANSI escape codes:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Color codes (foreground\/background)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Styling (bold, italic, underline)","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Terminal state management"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":3,"anchor":"Terminal-Abstraction","text":"Terminal Abstraction","type":"heading"},{"inlineContent":[{"text":"Platform-specific terminal handling:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"macOS: termios","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Linux: termios via libc"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Raw mode, alternate screen, signal handling"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"anchor":"Performance-Considerations","text":"Performance Considerations","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Lazy Rendering","type":"text"}],"type":"strong"},{"text":": Only visible areas render","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Diff Optimization","type":"text"}],"type":"strong"},{"type":"text","text":": Only changed areas redraw"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Buffer Reuse","type":"text"}],"type":"strong"},{"text":": FrameBuffer recycled across frames","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"View Value Semantics"}],"type":"strong"},{"type":"text","text":": Lightweight copying and discarding"}],"type":"paragraph"}]}],"type":"orderedList"},{"level":2,"anchor":"Error-Handling","text":"Error Handling","type":"heading"},{"inlineContent":[{"type":"text","text":"TUIKit uses Swift’s error handling:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Fatal errors for programmer mistakes"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Non-fatal errors for recovery scenarios","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Storage backend errors are silenced (fallback to defaults)"}]}]}],"type":"unorderedList"},{"level":2,"anchor":"Platform-Support","text":"Platform Support","type":"heading"},{"level":3,"anchor":"macOS","text":"macOS","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Native UserDefaults for @AppStorage"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Full terminal support"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Modern Swift runtime"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":3,"anchor":"Linux","text":"Linux","type":"heading"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"JSON file storage for @AppStorage"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"glibc-based terminal support"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"XDG paths for configuration"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"anchor":"Future-Extensibility","text":"Future Extensibility","type":"heading"},{"inlineContent":[{"type":"text","text":"The architecture supports:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Custom storage backends"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Custom themes"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Custom appearances"}]}]},{"content":[{"inlineContent":[{"text":"Custom view components","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Animation system (planned)"}]}]}],"type":"unorderedList"},{"level":2,"anchor":"Related-Topics","text":"Related Topics","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Theme"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Appearance","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"FocusManager"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"FrameBuffer","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"doc:Rendering"}]}]},{"content":[{"inlineContent":[{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference"}],"type":"paragraph"}]}],"type":"unorderedList"}]}],"metadata":{"role":"article","roleHeading":"Article","title":"Architecture Overview"},"schemaVersion":{"patch":0,"major":0,"minor":3},"kind":"article","abstract":[{"type":"text","text":"Understand the architecture and design patterns that power TUIKit."}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/buildinteractivemenu.json b/docs/data/documentation/tuikit/buildinteractivemenu.json index 110e34f..6be1a84 100644 --- a/docs/data/documentation/tuikit/buildinteractivemenu.json +++ b/docs/data/documentation/tuikit/buildinteractivemenu.json @@ -1 +1 @@ -{"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","interfaceLanguage":"swift"},"primaryContentSections":[{"content":[{"anchor":"Overview","type":"heading","level":2,"text":"Overview"},{"type":"paragraph","inlineContent":[{"text":"In this tutorial, you’ll create a menu-driven application featuring:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Menu"},{"type":"text","text":" component for selection"}]}]},{"content":[{"inlineContent":[{"text":"Keyboard shortcut handling","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Status bar with hints","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Page navigation patterns","type":"text"}]}]}]},{"anchor":"Next-Steps","type":"heading","level":2,"text":"Next Steps"},{"type":"paragraph","inlineContent":[{"type":"text","text":"You’ve created an interactive menu-driven application!"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Learn about "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","isActive":true},{"type":"text","text":" for advanced focus management"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Explore "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true},{"type":"text","text":" for more complex state patterns"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Try building a "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","isActive":true},{"type":"text","text":" with theme switching"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Check out ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","isActive":true,"type":"reference"},{"text":" for custom styling","type":"text"}]}]}]}],"kind":"content"}],"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"title":"Building an Interactive Menu","role":"article","roleHeading":"Article"},"abstract":[{"text":"Create a navigation menu with keyboard shortcuts and status bar hints.","type":"text"}],"kind":"article","schemaVersion":{"major":0,"minor":3,"patch":0},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"title":"Focus Management","abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"kind":"article","role":"article","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","url":"\/documentation\/tuikit\/focus"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"url":"\/documentation\/tuikit\/buildthemableui","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","title":"Building a Themable UI"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article","url":"\/documentation\/tuikit\/statemanagement","type":"topic","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","title":"State Management"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article","kind":"article","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"title":"Appearance System","type":"topic"}}} \ No newline at end of file +{"kind":"article","schemaVersion":{"major":0,"patch":0,"minor":3},"abstract":[{"type":"text","text":"Create a navigation menu with keyboard shortcuts and status bar hints."}],"primaryContentSections":[{"kind":"content","content":[{"type":"heading","anchor":"Overview","level":2,"text":"Overview"},{"type":"paragraph","inlineContent":[{"text":"In this tutorial, you’ll create a menu-driven application featuring:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"codeVoice","code":"Menu"},{"type":"text","text":" component for selection"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Keyboard shortcut handling"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Status bar with hints","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Page navigation patterns","type":"text"}],"type":"paragraph"}]}]},{"type":"heading","anchor":"Next-Steps","level":2,"text":"Next Steps"},{"type":"paragraph","inlineContent":[{"text":"You’ve created an interactive menu-driven application!","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Learn about ","type":"text"},{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","type":"reference"},{"text":" for advanced focus management","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Explore ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference","isActive":true},{"text":" for more complex state patterns","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Try building a ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","isActive":true,"type":"reference"},{"text":" with theme switching","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Check out ","type":"text"},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance"},{"text":" for custom styling","type":"text"}],"type":"paragraph"}]}]}]}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu"},"metadata":{"title":"Building an Interactive Menu","role":"article","roleHeading":"Article"},"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"kind":"article","abstract":[{"text":"Create an application with dynamic theme switching and persistence.","type":"text"}],"title":"Building a Themable UI","url":"\/documentation\/tuikit\/buildthemableui","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"title":"Focus Management","role":"article","url":"\/documentation\/tuikit\/focus","type":"topic","kind":"article","abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"type":"topic","kind":"article","role":"article","title":"Appearance System","url":"\/documentation\/tuikit\/appearance"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/buildthemableui.json b/docs/data/documentation/tuikit/buildthemableui.json index 4fdb387..b097d97 100644 --- a/docs/data/documentation/tuikit/buildthemableui.json +++ b/docs/data/documentation/tuikit/buildthemableui.json @@ -1 +1 @@ -{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"text":"Create an application with dynamic theme switching and persistence.","type":"text"}],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","interfaceLanguage":"swift"},"metadata":{"roleHeading":"Article","title":"Building a Themable UI","role":"article"},"sections":[],"schemaVersion":{"minor":3,"major":0,"patch":0},"kind":"article","primaryContentSections":[{"content":[{"anchor":"Overview","type":"heading","text":"Overview","level":2},{"inlineContent":[{"type":"text","text":"In this tutorial, you’ll create an app that features:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Theme environment integration"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Dynamic theme switching"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Persisted theme preference"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Visual theme selection UI"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"Next-Steps","type":"heading","text":"Next Steps","level":2},{"inlineContent":[{"type":"text","text":"Congratulations! You’ve built a fully themed, customizable application."}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Learn more about "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","isActive":true},{"type":"text","text":" for creating custom themes"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Explore "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","isActive":true},{"type":"text","text":" for structural styles"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"See ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"},{"text":" for advanced state patterns","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Check the "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture"},{"type":"text","text":" overview for deeper understanding"}]}]}],"type":"unorderedList"}],"kind":"content"}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article","kind":"article","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"title":"Appearance System","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"title":"Theming System","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","role":"article","url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"title":"Architecture Overview","abstract":[{"type":"text","text":"Understand the architecture and design patterns that power TUIKit."}],"url":"\/documentation\/tuikit\/architecture","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","role":"article","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article","url":"\/documentation\/tuikit\/statemanagement","type":"topic","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","title":"State Management"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"}}} \ No newline at end of file +{"schemaVersion":{"patch":0,"minor":3,"major":0},"metadata":{"roleHeading":"Article","title":"Building a Themable UI","role":"article"},"kind":"article","hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"text":"Create an application with dynamic theme switching and persistence.","type":"text"}],"primaryContentSections":[{"content":[{"text":"Overview","anchor":"Overview","type":"heading","level":2},{"inlineContent":[{"type":"text","text":"In this tutorial, you’ll create an app that features:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Theme environment integration"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Dynamic theme switching"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Persisted theme preference"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Visual theme selection UI"}]}]}],"type":"unorderedList"},{"text":"Next Steps","anchor":"Next-Steps","type":"heading","level":2},{"inlineContent":[{"text":"Congratulations! You’ve built a fully themed, customizable application.","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Learn more about ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","isActive":true,"type":"reference"},{"text":" for creating custom themes","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Explore "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance"},{"type":"text","text":" for structural styles"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"See "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true},{"type":"text","text":" for advanced state patterns"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Check the ","type":"text"},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","isActive":true},{"text":" overview for deeper understanding","type":"text"}]}]}],"type":"unorderedList"}],"kind":"content"}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI"},"sections":[],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"kind":"article","title":"Theming System","url":"\/documentation\/tuikit\/theming","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"type":"topic","kind":"article","role":"article","title":"Appearance System","url":"\/documentation\/tuikit\/appearance"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"abstract":[{"text":"Understand the architecture and design patterns that power TUIKit.","type":"text"}],"kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","type":"topic","role":"article","title":"Architecture Overview","url":"\/documentation\/tuikit\/architecture"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/buildyourfirstapp.json b/docs/data/documentation/tuikit/buildyourfirstapp.json index e8ebf56..cfa2fe6 100644 --- a/docs/data/documentation/tuikit/buildyourfirstapp.json +++ b/docs/data/documentation/tuikit/buildyourfirstapp.json @@ -1 +1 @@ -{"abstract":[{"text":"Create a simple counter application to learn TUIKit basics.","type":"text"}],"kind":"article","hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"sections":[],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp"},"primaryContentSections":[{"content":[{"text":"Overview","type":"heading","anchor":"Overview","level":2},{"type":"paragraph","inlineContent":[{"text":"In this tutorial, you’ll build a working counter app with increment\/decrement buttons.","type":"text"},{"text":" ","type":"text"},{"text":"This will teach you:","type":"text"}]},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Creating an app with the ","type":"text"},{"code":"@main","type":"codeVoice"},{"text":" attribute","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Using "},{"type":"codeVoice","code":"VStack"},{"type":"text","text":" and "},{"type":"codeVoice","code":"HStack"},{"type":"text","text":" for layout"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Handling button taps with ","type":"text"},{"code":"@State","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Running and testing your app"}]}]}],"type":"unorderedList"},{"text":"Next Steps","type":"heading","anchor":"Next-Steps","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"Congratulations! You’ve built your first TUIKit app."}]},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Learn more about "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"},{"type":"text","text":" for complex state scenarios"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Explore "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","isActive":true},{"type":"text","text":" to customize colors"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Try building an interactive "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu"}]}]},{"content":[{"inlineContent":[{"text":"Check out ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers"},{"text":" for more styling options","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"}],"kind":"content"}],"metadata":{"role":"article","title":"Building Your First App","roleHeading":"Article"},"schemaVersion":{"patch":0,"minor":3,"major":0},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"title":"Building an Interactive Menu","url":"\/documentation\/tuikit\/buildinteractivemenu","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","kind":"article","role":"article","abstract":[{"type":"text","text":"Create a navigation menu with keyboard shortcuts and status bar hints."}],"type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article","url":"\/documentation\/tuikit\/statemanagement","type":"topic","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","title":"State Management"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"title":"Theming System","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","role":"article","url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}],"url":"\/documentation\/tuikit\/modifiers","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","title":"View Modifiers"}}} \ No newline at end of file +{"sections":[],"schemaVersion":{"minor":3,"major":0,"patch":0},"kind":"article","abstract":[{"type":"text","text":"Create a simple counter application to learn TUIKit basics."}],"metadata":{"role":"article","title":"Building Your First App","roleHeading":"Article"},"primaryContentSections":[{"kind":"content","content":[{"level":2,"type":"heading","anchor":"Overview","text":"Overview"},{"type":"paragraph","inlineContent":[{"type":"text","text":"In this tutorial, you’ll build a working counter app with increment\/decrement buttons."},{"type":"text","text":" "},{"type":"text","text":"This will teach you:"}]},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Creating an app with the "},{"type":"codeVoice","code":"@main"},{"type":"text","text":" attribute"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Using "},{"code":"VStack","type":"codeVoice"},{"type":"text","text":" and "},{"code":"HStack","type":"codeVoice"},{"type":"text","text":" for layout"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Handling button taps with ","type":"text"},{"code":"@State","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Running and testing your app"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"type":"heading","anchor":"Next-Steps","text":"Next Steps"},{"type":"paragraph","inlineContent":[{"text":"Congratulations! You’ve built your first TUIKit app.","type":"text"}]},{"items":[{"content":[{"inlineContent":[{"text":"Learn more about ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true,"type":"reference"},{"text":" for complex state scenarios","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Explore ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","isActive":true,"type":"reference"},{"text":" to customize colors","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Try building an interactive "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","isActive":true}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Check out ","type":"text"},{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"reference"},{"text":" for more styling options","type":"text"}]}]}],"type":"unorderedList"}]}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"kind":"article","title":"Theming System","url":"\/documentation\/tuikit\/theming","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"role":"article","title":"Building an Interactive Menu","type":"topic","kind":"article","url":"\/documentation\/tuikit\/buildinteractivemenu","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","abstract":[{"text":"Create a navigation menu with keyboard shortcuts and status bar hints.","type":"text"}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"title":"View Modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","url":"\/documentation\/tuikit\/modifiers","role":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}]}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/focus.json b/docs/data/documentation/tuikit/focus.json index e7f2400..9e3e77d 100644 --- a/docs/data/documentation/tuikit/focus.json +++ b/docs/data/documentation/tuikit/focus.json @@ -1 +1 @@ -{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"schemaVersion":{"patch":0,"minor":3,"major":0},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","interfaceLanguage":"swift"},"metadata":{"roleHeading":"Article","title":"Focus Management","role":"article"},"abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"primaryContentSections":[{"content":[{"text":"Overview","level":2,"anchor":"Overview","type":"heading"},{"inlineContent":[{"type":"text","text":"TUIKit provides a sophisticated focus management system that enables Tab\/Shift+Tab navigation, keyboard shortcuts, and custom focus logic."}],"type":"paragraph"},{"text":"The Focus Manager","level":2,"anchor":"The-Focus-Manager","type":"heading"},{"inlineContent":[{"code":"FocusManager","type":"codeVoice"},{"text":" manages which component currently has keyboard focus:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["@Environment(\\.focusManager) var focusManager","","Button(\"Click me\") {"," \/\/ Handle click","}",".focused(focusID: \"myButton\")"],"type":"codeListing"},{"text":"Tab Navigation","level":2,"anchor":"Tab-Navigation","type":"heading"},{"inlineContent":[{"type":"text","text":"By default, all focusable elements can be navigated with Tab and Shift+Tab:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Tab"}]},{"type":"text","text":": Move focus to the next element"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Shift+Tab"}]},{"text":": Move focus to the previous element","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Enter\/Space"}],"type":"strong"},{"text":": Activate focused button","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"syntax":"swift","code":["VStack(spacing: 1) {"," Text(\"Navigation\")",""," Button(\"First\") { }"," Button(\"Second\") { }"," Button(\"Third\") { }","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"Users can Tab between the buttons in order."}],"type":"paragraph"},{"text":"Focus Indicators","level":2,"anchor":"Focus-Indicators","type":"heading"},{"inlineContent":[{"text":"Focusable elements show a focus indicator when active:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Button(\"Focusable\") {"," print(\"Activated\")","}"],"type":"codeListing"},{"inlineContent":[{"text":"The button displays:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"A border around the element"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Visual highlight (usually arrow prefix: "},{"code":"▸","type":"codeVoice"},{"type":"text","text":")"}]}]},{"content":[{"inlineContent":[{"text":"Theme accent color","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"text":"Programmatic Focus","level":2,"anchor":"Programmatic-Focus","type":"heading"},{"inlineContent":[{"type":"text","text":"Set focus programmatically:"}],"type":"paragraph"},{"syntax":"swift","code":["struct Settings: View {"," @State private var focusedField: String?",""," var body: some View {"," VStack(spacing: 1) {"," Button(\"First\") { focusedField = \"first\" }"," .focused(focusID: \"first\", focused: focusedField == \"first\")",""," Button(\"Second\") { focusedField = \"second\" }"," .focused(focusID: \"second\", focused: focusedField == \"second\")",""," Button(\"Reset\") { focusedField = nil }"," }"," }","}"],"type":"codeListing"},{"text":"Keyboard Events","level":2,"anchor":"Keyboard-Events","type":"heading"},{"inlineContent":[{"type":"text","text":"Handle keyboard events with "},{"type":"codeVoice","code":"onKeyPress"},{"type":"text","text":":"}],"type":"paragraph"},{"syntax":"swift","code":["struct App: View {"," var body: some View {"," VStack {"," ContentView()"," .onKeyPress { event in"," if event.key == .character(\"h\") && event.modifiers.contains(.ctrl) {"," print(\"Help requested\")"," return true"," }"," return false"," }"," }"," }","}"],"type":"codeListing"},{"text":"Key Event Structure","level":3,"anchor":"Key-Event-Structure","type":"heading"},{"inlineContent":[{"code":"KeyEvent","type":"codeVoice"},{"type":"text","text":" contains:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"key","type":"text"}]},{"type":"text","text":": The key pressed (character, arrow, enter, etc.)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"modifiers","type":"text"}]},{"type":"text","text":": Ctrl, Shift, Alt flags"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"raw","type":"text"}],"type":"strong"},{"text":": Raw terminal escape sequence","type":"text"}]}]}],"type":"unorderedList"},{"text":"Special Keys","level":3,"anchor":"Special-Keys","type":"heading"},{"inlineContent":[{"type":"text","text":"Handle special keys like arrows and function keys:"}],"type":"paragraph"},{"syntax":"swift","code":[".onKeyPress { event in"," switch event.key {"," case .up:"," print(\"Arrow up\")"," case .down:"," print(\"Arrow down\")"," case .left:"," print(\"Arrow left\")"," case .right:"," print(\"Arrow right\")"," case .enter:"," print(\"Enter pressed\")"," case .escape:"," print(\"Escape pressed\")"," case .tab:"," print(\"Tab pressed\")"," case .character(let char):"," print(\"Character: \\(char)\")"," default:"," break"," }"," return true","}"],"type":"codeListing"},{"text":"Focusable Protocol","level":2,"anchor":"Focusable-Protocol","type":"heading"},{"inlineContent":[{"text":"Components conform to ","type":"text"},{"code":"Focusable","type":"codeVoice"},{"text":" to support focus:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["public protocol Focusable {"," var focusID: String? { get }"," var isFocused: Bool { get }","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"Button, Menu, and other interactive components automatically implement this."}],"type":"paragraph"},{"text":"Custom Focus Logic","level":2,"anchor":"Custom-Focus-Logic","type":"heading"},{"inlineContent":[{"type":"text","text":"Create custom focus behavior:"}],"type":"paragraph"},{"syntax":"swift","code":["struct CustomMenu: View {"," @State private var selectedIndex: Int = 0"," let items: [String]",""," var body: some View {"," VStack(spacing: 0) {"," ForEach(Array(items.enumerated()), id: \\.offset) { index, item in"," Text(item)"," .padding(1)"," .background(selectedIndex == index ? .theme.accent : .clear)"," }"," }"," .onKeyPress { event in"," switch event.key {"," case .up:"," selectedIndex = max(0, selectedIndex - 1)"," return true"," case .down:"," selectedIndex = min(items.count - 1, selectedIndex + 1)"," return true"," default:"," return false"," }"," }"," }","}"],"type":"codeListing"},{"text":"Focus in Modals","level":2,"anchor":"Focus-in-Modals","type":"heading"},{"inlineContent":[{"text":"Focus works correctly with modals and overlays:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["@State var showDialog: Bool = false","","var body: some View {"," VStack {"," if showDialog {"," Alert("," title: \"Confirm\","," message: \"Continue?\""," ) {"," VStack(spacing: 1) {"," Button(\"Yes\") { showDialog = false }"," Button(\"No\") { showDialog = false }"," }"," }"," .modal()"," }",""," Button(\"Show Dialog\") { showDialog = true }"," }","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"When a modal appears, focus automatically moves to the first focusable element in the modal."}],"type":"paragraph"},{"text":"Best Practices","level":2,"anchor":"Best-Practices","type":"heading"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Tab order"}],"type":"strong"},{"type":"text","text":": Arrange elements logically for Tab navigation"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Feedback"}]},{"text":": Always provide visual feedback for focused elements","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Shortcuts","type":"text"}]},{"text":": Implement keyboard shortcuts for common actions","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Testing"}]},{"type":"text","text":": Test focus behavior with keyboard navigation"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Accessibility","type":"text"}],"type":"strong"},{"type":"text","text":": Consider users with motor impairments who rely on keyboard"}],"type":"paragraph"}]}],"type":"orderedList"},{"text":"Status Bar Integration","level":2,"anchor":"Status-Bar-Integration","type":"heading"},{"inlineContent":[{"text":"Status bar items show keyboard shortcuts:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":[".statusBarItems {"," StatusBarItem("," label: \"Help\","," shortcut: Shortcut.letter(\"?\"),"," action: {"," print(\"Show help\")"," }"," )",""," StatusBarItem("," label: \"Quit\","," shortcut: Shortcut.letter(\"q\"),"," action: {"," print(\"Exit app\")"," }"," )","}"],"type":"codeListing"},{"text":"Related Topics","level":2,"anchor":"Related-Topics","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"FocusManager"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"KeyEvent"}]}]},{"content":[{"inlineContent":[{"code":"Focusable","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/onKeyPress(_:)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"StatusBar","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"code":"StatusBarItem","type":"codeVoice"}],"type":"paragraph"}]}],"type":"unorderedList"}],"kind":"content"}],"sections":[],"kind":"article","references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"}}} \ No newline at end of file +{"metadata":{"role":"article","title":"Focus Management","roleHeading":"Article"},"schemaVersion":{"patch":0,"major":0,"minor":3},"abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"kind":"article","identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"primaryContentSections":[{"content":[{"anchor":"Overview","text":"Overview","level":2,"type":"heading"},{"inlineContent":[{"text":"TUIKit provides a sophisticated focus management system that enables Tab\/Shift+Tab navigation, keyboard shortcuts, and custom focus logic.","type":"text"}],"type":"paragraph"},{"anchor":"The-Focus-Manager","text":"The Focus Manager","level":2,"type":"heading"},{"inlineContent":[{"type":"codeVoice","code":"FocusManager"},{"text":" manages which component currently has keyboard focus:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["@Environment(\\.focusManager) var focusManager","","Button(\"Click me\") {"," \/\/ Handle click","}",".focused(focusID: \"myButton\")"],"type":"codeListing"},{"anchor":"Tab-Navigation","text":"Tab Navigation","level":2,"type":"heading"},{"inlineContent":[{"type":"text","text":"By default, all focusable elements can be navigated with Tab and Shift+Tab:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Tab"}],"type":"strong"},{"text":": Move focus to the next element","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Shift+Tab","type":"text"}],"type":"strong"},{"text":": Move focus to the previous element","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Enter\/Space","type":"text"}]},{"type":"text","text":": Activate focused button"}],"type":"paragraph"}]}],"type":"unorderedList"},{"syntax":"swift","code":["VStack(spacing: 1) {"," Text(\"Navigation\")",""," Button(\"First\") { }"," Button(\"Second\") { }"," Button(\"Third\") { }","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"Users can Tab between the buttons in order."}],"type":"paragraph"},{"anchor":"Focus-Indicators","text":"Focus Indicators","level":2,"type":"heading"},{"inlineContent":[{"text":"Focusable elements show a focus indicator when active:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Button(\"Focusable\") {"," print(\"Activated\")","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"The button displays:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"A border around the element","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Visual highlight (usually arrow prefix: "},{"type":"codeVoice","code":"▸"},{"type":"text","text":")"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Theme accent color","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"Programmatic-Focus","text":"Programmatic Focus","level":2,"type":"heading"},{"inlineContent":[{"type":"text","text":"Set focus programmatically:"}],"type":"paragraph"},{"syntax":"swift","code":["struct Settings: View {"," @State private var focusedField: String?",""," var body: some View {"," VStack(spacing: 1) {"," Button(\"First\") { focusedField = \"first\" }"," .focused(focusID: \"first\", focused: focusedField == \"first\")",""," Button(\"Second\") { focusedField = \"second\" }"," .focused(focusID: \"second\", focused: focusedField == \"second\")",""," Button(\"Reset\") { focusedField = nil }"," }"," }","}"],"type":"codeListing"},{"anchor":"Keyboard-Events","text":"Keyboard Events","level":2,"type":"heading"},{"inlineContent":[{"text":"Handle keyboard events with ","type":"text"},{"code":"onKeyPress","type":"codeVoice"},{"text":":","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["struct App: View {"," var body: some View {"," VStack {"," ContentView()"," .onKeyPress { event in"," if event.key == .character(\"h\") && event.modifiers.contains(.ctrl) {"," print(\"Help requested\")"," return true"," }"," return false"," }"," }"," }","}"],"type":"codeListing"},{"anchor":"Key-Event-Structure","text":"Key Event Structure","level":3,"type":"heading"},{"inlineContent":[{"code":"KeyEvent","type":"codeVoice"},{"text":" contains:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"key"}]},{"type":"text","text":": The key pressed (character, arrow, enter, etc.)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"modifiers"}]},{"type":"text","text":": Ctrl, Shift, Alt flags"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"raw"}]},{"type":"text","text":": Raw terminal escape sequence"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"Special-Keys","text":"Special Keys","level":3,"type":"heading"},{"inlineContent":[{"text":"Handle special keys like arrows and function keys:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":[".onKeyPress { event in"," switch event.key {"," case .up:"," print(\"Arrow up\")"," case .down:"," print(\"Arrow down\")"," case .left:"," print(\"Arrow left\")"," case .right:"," print(\"Arrow right\")"," case .enter:"," print(\"Enter pressed\")"," case .escape:"," print(\"Escape pressed\")"," case .tab:"," print(\"Tab pressed\")"," case .character(let char):"," print(\"Character: \\(char)\")"," default:"," break"," }"," return true","}"],"type":"codeListing"},{"anchor":"Focusable-Protocol","text":"Focusable Protocol","level":2,"type":"heading"},{"inlineContent":[{"type":"text","text":"Components conform to "},{"type":"codeVoice","code":"Focusable"},{"type":"text","text":" to support focus:"}],"type":"paragraph"},{"syntax":"swift","code":["public protocol Focusable {"," var focusID: String? { get }"," var isFocused: Bool { get }","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"Button, Menu, and other interactive components automatically implement this."}],"type":"paragraph"},{"anchor":"Custom-Focus-Logic","text":"Custom Focus Logic","level":2,"type":"heading"},{"inlineContent":[{"text":"Create custom focus behavior:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["struct CustomMenu: View {"," @State private var selectedIndex: Int = 0"," let items: [String]",""," var body: some View {"," VStack(spacing: 0) {"," ForEach(Array(items.enumerated()), id: \\.offset) { index, item in"," Text(item)"," .padding(1)"," .background(selectedIndex == index ? .theme.accent : .clear)"," }"," }"," .onKeyPress { event in"," switch event.key {"," case .up:"," selectedIndex = max(0, selectedIndex - 1)"," return true"," case .down:"," selectedIndex = min(items.count - 1, selectedIndex + 1)"," return true"," default:"," return false"," }"," }"," }","}"],"type":"codeListing"},{"anchor":"Focus-in-Modals","text":"Focus in Modals","level":2,"type":"heading"},{"inlineContent":[{"text":"Focus works correctly with modals and overlays:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["@State var showDialog: Bool = false","","var body: some View {"," VStack {"," if showDialog {"," Alert("," title: \"Confirm\","," message: \"Continue?\""," ) {"," VStack(spacing: 1) {"," Button(\"Yes\") { showDialog = false }"," Button(\"No\") { showDialog = false }"," }"," }"," .modal()"," }",""," Button(\"Show Dialog\") { showDialog = true }"," }","}"],"type":"codeListing"},{"inlineContent":[{"text":"When a modal appears, focus automatically moves to the first focusable element in the modal.","type":"text"}],"type":"paragraph"},{"anchor":"Best-Practices","text":"Best Practices","level":2,"type":"heading"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Tab order"}],"type":"strong"},{"text":": Arrange elements logically for Tab navigation","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Feedback"}],"type":"strong"},{"text":": Always provide visual feedback for focused elements","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Shortcuts","type":"text"}]},{"type":"text","text":": Implement keyboard shortcuts for common actions"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Testing","type":"text"}],"type":"strong"},{"text":": Test focus behavior with keyboard navigation","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Accessibility"}],"type":"strong"},{"text":": Consider users with motor impairments who rely on keyboard","type":"text"}],"type":"paragraph"}]}],"type":"orderedList"},{"anchor":"Status-Bar-Integration","text":"Status Bar Integration","level":2,"type":"heading"},{"inlineContent":[{"type":"text","text":"Status bar items show keyboard shortcuts:"}],"type":"paragraph"},{"syntax":"swift","code":[".statusBarItems {"," StatusBarItem("," label: \"Help\","," shortcut: Shortcut.letter(\"?\"),"," action: {"," print(\"Show help\")"," }"," )",""," StatusBarItem("," label: \"Quit\","," shortcut: Shortcut.letter(\"q\"),"," action: {"," print(\"Exit app\")"," }"," )","}"],"type":"codeListing"},{"anchor":"Related-Topics","text":"Related Topics","level":2,"type":"heading"},{"items":[{"content":[{"inlineContent":[{"code":"FocusManager","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"KeyEvent"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Focusable","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"code":"View\/onKeyPress(_:)","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"StatusBar","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"StatusBarItem","type":"codeVoice"}]}]}],"type":"unorderedList"}],"kind":"content"}],"sections":[],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/gettingstarted.json b/docs/data/documentation/tuikit/gettingstarted.json index 3a646fc..f51526a 100644 --- a/docs/data/documentation/tuikit/gettingstarted.json +++ b/docs/data/documentation/tuikit/gettingstarted.json @@ -1 +1 @@ -{"primaryContentSections":[{"content":[{"type":"heading","level":2,"text":"Installation","anchor":"Installation"},{"type":"heading","level":3,"text":"Using Swift Package Manager","anchor":"Using-Swift-Package-Manager"},{"type":"paragraph","inlineContent":[{"text":"Add TUIKit to your ","type":"text"},{"code":"Package.swift","type":"codeVoice"},{"text":":","type":"text"}]},{"type":"codeListing","syntax":"swift","code":[".package(url: \"https:\/\/github.com\/anthropics\/SwiftTUI.git\", from: \"0.1.0\")"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Or via Xcode: File > Add Packages > Enter repository URL"}]},{"type":"heading","level":2,"text":"Creating Your First App","anchor":"Creating-Your-First-App"},{"type":"heading","level":3,"text":"1. Define Your App","anchor":"1-Define-Your-App"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Every TUIKit app needs an "},{"type":"codeVoice","code":"@main"},{"type":"text","text":" entry point that conforms to the "},{"type":"codeVoice","code":"App"},{"type":"text","text":" protocol:"}]},{"type":"codeListing","syntax":"swift","code":["import TUIKit","","@main","struct HelloApp: App {"," var body: some Scene {"," WindowGroup {"," Text(\"Hello, TUIKit!\")"," }"," }","}"]},{"type":"heading","level":3,"text":"2. Add Some Layout","anchor":"2-Add-Some-Layout"},{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"type":"codeVoice","code":"VStack"},{"text":" and ","type":"text"},{"type":"codeVoice","code":"HStack"},{"text":" to organize your content:","type":"text"}]},{"type":"codeListing","syntax":"swift","code":["@main","struct LayoutApp: App {"," var body: some Scene {"," WindowGroup {"," VStack(spacing: 1) {"," Text(\"Welcome\")"," .bold()",""," Text(\"Build terminal UIs in Swift\")",""," Spacer()",""," Text(\"Press 'q' to quit\")"," .foregroundColor(.theme.foregroundSecondary)"," }"," .padding()"," }"," }","}"]},{"type":"heading","level":3,"text":"3. Make It Interactive","anchor":"3-Make-It-Interactive"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add buttons and state to create interactive interfaces:"}]},{"type":"codeListing","syntax":"swift","code":["import TUIKit","","@main","struct InteractiveApp: App {"," @State var count: Int = 0",""," var body: some Scene {"," WindowGroup {"," VStack(spacing: 1) {"," Text(\"Counter: \\(count)\")"," .bold()",""," HStack(spacing: 2) {"," Button(\"Increment\") { count += 1 }"," Button(\"Decrement\") { count = max(0, count - 1) }"," }",""," Spacer()"," }"," .padding()"," }"," }","}"]},{"type":"heading","level":2,"text":"Running Your App","anchor":"Running-Your-App"},{"type":"heading","level":3,"text":"From Command Line","anchor":"From-Command-Line"},{"type":"codeListing","syntax":"bash","code":["swift run"]},{"type":"heading","level":3,"text":"With a Custom Executable Name","anchor":"With-a-Custom-Executable-Name"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add to "},{"code":"Package.swift","type":"codeVoice"},{"type":"text","text":":"}]},{"type":"codeListing","syntax":"swift","code":[".executableTarget("," name: \"MyApp\","," dependencies: [.product(name: \"TUIKit\", package: \"SwiftTUI\")]",")"]},{"type":"paragraph","inlineContent":[{"text":"Then run:","type":"text"}]},{"type":"codeListing","syntax":"bash","code":["swift run MyApp"]},{"type":"heading","level":2,"text":"Understanding the Basics","anchor":"Understanding-the-Basics"},{"type":"heading","level":3,"text":"Views","anchor":"Views"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Everything in TUIKit is a "},{"type":"codeVoice","code":"View"},{"type":"text","text":". Views are lightweight, composable units that render content to the terminal."}]},{"type":"paragraph","inlineContent":[{"text":"Common views:","type":"text"}]},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Text"}],"type":"strong"},{"text":": Display text with optional styling","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"Button","type":"codeVoice"}],"type":"strong"},{"text":": Interactive button with action handler","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"VStack"}],"type":"strong"},{"type":"text","text":": Arrange views vertically"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"HStack"}],"type":"strong"},{"type":"text","text":": Arrange views horizontally"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"code":"Spacer","type":"codeVoice"}]},{"type":"text","text":": Fill available space"}]}]}],"type":"unorderedList"},{"type":"heading","level":3,"text":"State Management","anchor":"State-Management"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" to make your views interactive:"}]},{"type":"codeListing","syntax":"swift","code":["@State var isVisible: Bool = true","","VStack {"," if isVisible {"," Text(\"Visible\")"," }"," Button(\"Toggle\") { isVisible.toggle() }","}"]},{"type":"heading","level":3,"text":"Modifiers","anchor":"Modifiers"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Customize views with modifiers:"}]},{"type":"codeListing","syntax":"swift","code":["Text(\"Hello\")"," .bold()"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)"]},{"type":"heading","level":2,"text":"Next Steps","anchor":"Next-Steps"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Explore the "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy"},{"type":"text","text":" to understand component organization"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Learn "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"},{"type":"text","text":" for complex state scenarios"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Discover ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"text":" to customize colors and appearance","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Check out "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","isActive":true},{"type":"text","text":" for all available styling options"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Try "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","isActive":true},{"type":"text","text":" tutorial for step-by-step guidance"}],"type":"paragraph"}]}],"type":"unorderedList"},{"type":"heading","level":2,"text":"Key Bindings","anchor":"Key-Bindings"},{"type":"paragraph","inlineContent":[{"text":"By default, TUIKit apps support:","type":"text"}]},{"items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"q","type":"codeVoice"}]},{"type":"text","text":": Quit the application"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"t","type":"codeVoice"}],"type":"strong"},{"text":": Cycle through themes","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"a","type":"codeVoice"}]},{"type":"text","text":": Cycle through appearance styles"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"?"}],"type":"strong"},{"type":"text","text":": Show help"}],"type":"paragraph"}]}],"type":"unorderedList"},{"type":"paragraph","inlineContent":[{"text":"See ","type":"text"},{"code":"KeyEvent","type":"codeVoice"},{"text":" for custom keyboard handling.","type":"text"}]},{"type":"heading","level":2,"text":"Terminal Requirements","anchor":"Terminal-Requirements"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Minimum 80x24 character terminal"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"ANSI color support (256 colors recommended)","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"UTF-8 encoding","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Supports: macOS Terminal, iTerm2, Kitty, and Linux terminals (gnome-terminal, konsole, etc.)"}],"type":"paragraph"}]}],"type":"unorderedList"}],"kind":"content"}],"metadata":{"role":"article","roleHeading":"Article","title":"Getting Started with TUIKit"},"kind":"article","abstract":[{"text":"Create your first terminal user interface in minutes.","type":"text"}],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","interfaceLanguage":"swift"},"schemaVersion":{"major":0,"patch":0,"minor":3},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}],"url":"\/documentation\/tuikit\/modifiers","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","title":"View Modifiers"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article","url":"\/documentation\/tuikit\/statemanagement","type":"topic","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","title":"State Management"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"title":"Theming System","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","role":"article","url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Create a simple counter application to learn TUIKit basics."}],"title":"Building Your First App","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","role":"article","url":"\/documentation\/tuikit\/buildyourfirstapp"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"role":"article","url":"\/documentation\/tuikit\/viewhierarchy","kind":"article","abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","title":"Understanding the View Hierarchy","type":"topic"}}} \ No newline at end of file +{"metadata":{"title":"Getting Started with TUIKit","roleHeading":"Article","role":"article"},"schemaVersion":{"minor":3,"major":0,"patch":0},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","interfaceLanguage":"swift"},"kind":"article","hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"sections":[],"primaryContentSections":[{"content":[{"level":2,"text":"Installation","anchor":"Installation","type":"heading"},{"level":3,"text":"Using Swift Package Manager","anchor":"Using-Swift-Package-Manager","type":"heading"},{"type":"paragraph","inlineContent":[{"text":"Add TUIKit to your ","type":"text"},{"code":"Package.swift","type":"codeVoice"},{"text":":","type":"text"}]},{"code":[".package(url: \"https:\/\/github.com\/anthropics\/SwiftTUI.git\", from: \"0.1.0\")"],"syntax":"swift","type":"codeListing"},{"type":"paragraph","inlineContent":[{"text":"Or via Xcode: File > Add Packages > Enter repository URL","type":"text"}]},{"level":2,"text":"Creating Your First App","anchor":"Creating-Your-First-App","type":"heading"},{"level":3,"text":"1. Define Your App","anchor":"1-Define-Your-App","type":"heading"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Every TUIKit app needs an "},{"type":"codeVoice","code":"@main"},{"type":"text","text":" entry point that conforms to the "},{"type":"codeVoice","code":"App"},{"type":"text","text":" protocol:"}]},{"code":["import TUIKit","","@main","struct HelloApp: App {"," var body: some Scene {"," WindowGroup {"," Text(\"Hello, TUIKit!\")"," }"," }","}"],"syntax":"swift","type":"codeListing"},{"level":3,"text":"2. Add Some Layout","anchor":"2-Add-Some-Layout","type":"heading"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"code":"VStack","type":"codeVoice"},{"type":"text","text":" and "},{"code":"HStack","type":"codeVoice"},{"type":"text","text":" to organize your content:"}]},{"code":["@main","struct LayoutApp: App {"," var body: some Scene {"," WindowGroup {"," VStack(spacing: 1) {"," Text(\"Welcome\")"," .bold()",""," Text(\"Build terminal UIs in Swift\")",""," Spacer()",""," Text(\"Press 'q' to quit\")"," .foregroundColor(.theme.foregroundSecondary)"," }"," .padding()"," }"," }","}"],"syntax":"swift","type":"codeListing"},{"level":3,"text":"3. Make It Interactive","anchor":"3-Make-It-Interactive","type":"heading"},{"type":"paragraph","inlineContent":[{"text":"Add buttons and state to create interactive interfaces:","type":"text"}]},{"code":["import TUIKit","","@main","struct InteractiveApp: App {"," @State var count: Int = 0",""," var body: some Scene {"," WindowGroup {"," VStack(spacing: 1) {"," Text(\"Counter: \\(count)\")"," .bold()",""," HStack(spacing: 2) {"," Button(\"Increment\") { count += 1 }"," Button(\"Decrement\") { count = max(0, count - 1) }"," }",""," Spacer()"," }"," .padding()"," }"," }","}"],"syntax":"swift","type":"codeListing"},{"level":2,"text":"Running Your App","anchor":"Running-Your-App","type":"heading"},{"level":3,"text":"From Command Line","anchor":"From-Command-Line","type":"heading"},{"code":["swift run"],"syntax":"bash","type":"codeListing"},{"level":3,"text":"With a Custom Executable Name","anchor":"With-a-Custom-Executable-Name","type":"heading"},{"type":"paragraph","inlineContent":[{"text":"Add to ","type":"text"},{"code":"Package.swift","type":"codeVoice"},{"text":":","type":"text"}]},{"code":[".executableTarget("," name: \"MyApp\","," dependencies: [.product(name: \"TUIKit\", package: \"SwiftTUI\")]",")"],"syntax":"swift","type":"codeListing"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Then run:"}]},{"code":["swift run MyApp"],"syntax":"bash","type":"codeListing"},{"level":2,"text":"Understanding the Basics","anchor":"Understanding-the-Basics","type":"heading"},{"level":3,"text":"Views","anchor":"Views","type":"heading"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Everything in TUIKit is a "},{"code":"View","type":"codeVoice"},{"type":"text","text":". Views are lightweight, composable units that render content to the terminal."}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Common views:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Text"}]},{"type":"text","text":": Display text with optional styling"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Button"}],"type":"strong"},{"type":"text","text":": Interactive button with action handler"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"VStack","type":"codeVoice"}],"type":"strong"},{"type":"text","text":": Arrange views vertically"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"HStack"}],"type":"strong"},{"text":": Arrange views horizontally","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Spacer"}],"type":"strong"},{"text":": Fill available space","type":"text"}]}]}]},{"level":3,"text":"State Management","anchor":"State-Management","type":"heading"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" to make your views interactive:"}]},{"code":["@State var isVisible: Bool = true","","VStack {"," if isVisible {"," Text(\"Visible\")"," }"," Button(\"Toggle\") { isVisible.toggle() }","}"],"syntax":"swift","type":"codeListing"},{"level":3,"text":"Modifiers","anchor":"Modifiers","type":"heading"},{"type":"paragraph","inlineContent":[{"text":"Customize views with modifiers:","type":"text"}]},{"code":["Text(\"Hello\")"," .bold()"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)"],"syntax":"swift","type":"codeListing"},{"level":2,"text":"Next Steps","anchor":"Next-Steps","type":"heading"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Explore the ","type":"text"},{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","type":"reference"},{"text":" to understand component organization","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Learn "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true},{"type":"text","text":" for complex state scenarios"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Discover "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"type":"text","text":" to customize colors and appearance"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Check out "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers"},{"type":"text","text":" for all available styling options"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Try "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","isActive":true},{"type":"text","text":" tutorial for step-by-step guidance"}],"type":"paragraph"}]}]},{"level":2,"text":"Key Bindings","anchor":"Key-Bindings","type":"heading"},{"type":"paragraph","inlineContent":[{"text":"By default, TUIKit apps support:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"code":"q","type":"codeVoice"}]},{"type":"text","text":": Quit the application"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"t"}]},{"type":"text","text":": Cycle through themes"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"a","type":"codeVoice"}]},{"type":"text","text":": Cycle through appearance styles"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"?","type":"codeVoice"}]},{"type":"text","text":": Show help"}],"type":"paragraph"}]}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"See "},{"type":"codeVoice","code":"KeyEvent"},{"type":"text","text":" for custom keyboard handling."}]},{"level":2,"text":"Terminal Requirements","anchor":"Terminal-Requirements","type":"heading"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Minimum 80x24 character terminal","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"ANSI color support (256 colors recommended)","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"UTF-8 encoding","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Supports: macOS Terminal, iTerm2, Kitty, and Linux terminals (gnome-terminal, konsole, etc.)","type":"text"}],"type":"paragraph"}]}]}],"kind":"content"}],"abstract":[{"type":"text","text":"Create your first terminal user interface in minutes."}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"role":"article","url":"\/documentation\/tuikit\/buildyourfirstapp","kind":"article","abstract":[{"text":"Create a simple counter application to learn TUIKit basics.","type":"text"}],"type":"topic","title":"Building Your First App","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"title":"View Modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","url":"\/documentation\/tuikit\/modifiers","role":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"kind":"article","title":"Theming System","url":"\/documentation\/tuikit\/theming","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"url":"\/documentation\/tuikit\/viewhierarchy","abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","kind":"article","title":"Understanding the View Hierarchy","role":"article"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/modifiers.json b/docs/data/documentation/tuikit/modifiers.json index 4c4be1f..769784e 100644 --- a/docs/data/documentation/tuikit/modifiers.json +++ b/docs/data/documentation/tuikit/modifiers.json @@ -1 +1 @@ -{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"schemaVersion":{"patch":0,"major":0,"minor":3},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","interfaceLanguage":"swift"},"metadata":{"roleHeading":"Article","role":"article","title":"View Modifiers"},"abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"primaryContentSections":[{"content":[{"text":"Overview","level":2,"anchor":"Overview","type":"heading"},{"inlineContent":[{"text":"Modifiers are methods that return a modified copy of a view. Chain them together to build complex layouts and styling:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Hello\")"," .bold()"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)"],"type":"codeListing"},{"text":"Layout Modifiers","level":2,"anchor":"Layout-Modifiers","type":"heading"},{"text":"padding(_:)","level":3,"anchor":"padding","type":"heading"},{"inlineContent":[{"type":"text","text":"Add padding around content:"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Content\")"," .padding() \/\/ Default 1 unit"," .padding(2) \/\/ 2 units all sides"," .padding(.top, 1) \/\/ 1 unit top"," .padding(.horizontal, 2) \/\/ 2 units left\/right"],"type":"codeListing"},{"text":"frame(width:height:alignment:)","level":3,"anchor":"framewidthheightalignment","type":"heading"},{"inlineContent":[{"text":"Set fixed size:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Fixed\")"," .frame(width: 20, height: 5)","","Button(\"Button\")"," .frame(width: 15)"],"type":"codeListing"},{"text":"frame(minWidth:maxWidth:minHeight:maxHeight:)","level":3,"anchor":"frameminWidthmaxWidthminHeightmaxHeight","type":"heading"},{"inlineContent":[{"text":"Set flexible size constraints:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Flexible\")"," .frame(minWidth: 10, maxWidth: 50)"," .frame(minHeight: 3, maxHeight: 10)","","Text(\"Fill available space\")"," .frame(maxWidth: .infinity, maxHeight: .infinity)"],"type":"codeListing"},{"text":"Color Modifiers","level":2,"anchor":"Color-Modifiers","type":"heading"},{"text":"foregroundColor(_:)","level":3,"anchor":"foregroundColor","type":"heading"},{"inlineContent":[{"text":"Set text color:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Colored\")"," .foregroundColor(.theme.accent)","","Text(\"Green\")"," .foregroundColor(.ansi(.brightGreen))","","Text(\"Custom\")"," .foregroundColor(.hex(\"FF5500\"))"],"type":"codeListing"},{"text":"background(_:)","level":3,"anchor":"background","type":"heading"},{"inlineContent":[{"type":"text","text":"Add background color:"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Background\")"," .background(.theme.accent)"," .foregroundColor(.theme.background)"],"type":"codeListing"},{"text":"Text Styling","level":2,"anchor":"Text-Styling","type":"heading"},{"text":"Bold, Italic, Underline","level":3,"anchor":"Bold-Italic-Underline","type":"heading"},{"syntax":"swift","code":["Text(\"Bold\").bold()","Text(\"Italic\").italic()","Text(\"Underline\").underlined()","Text(\"Strikethrough\").strikethrough()","Text(\"Dim\").dimmed()","Text(\"Blinking\").blinking()","Text(\"Inverted\").inverted()"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"Combine multiple modifiers:"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Complex\")"," .bold()"," .italic()"," .foregroundColor(.theme.accent)"],"type":"codeListing"},{"text":"Border and Structure","level":2,"anchor":"Border-and-Structure","type":"heading"},{"text":"border(_:)","level":3,"anchor":"border","type":"heading"},{"inlineContent":[{"type":"text","text":"Add borders with different styles:"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Bordered\")"," .border(.rounded)","","Text(\"Heavy border\")"," .border(.heavy, width: 2)","","VStack {"," Text(\"Content\")","}",".border(.block, color: .theme.accent)"],"type":"codeListing"},{"text":"Overlay and Compositing","level":2,"anchor":"Overlay-and-Compositing","type":"heading"},{"text":"overlay(_:)","level":3,"anchor":"overlay","type":"heading"},{"inlineContent":[{"text":"Layer content on top:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Background\")"," .overlay {"," Text(\"Foreground\")"," }"],"type":"codeListing"},{"text":"dimmed()","level":3,"anchor":"dimmed","type":"heading"},{"inlineContent":[{"type":"text","text":"Reduce visual emphasis:"}],"type":"paragraph"},{"syntax":"swift","code":["VStack {"," Text(\"Normal\")"," Text(\"Dimmed\")"," .dimmed()","}"],"type":"codeListing"},{"text":"modal()","level":3,"anchor":"modal","type":"heading"},{"inlineContent":[{"text":"Combine dimmed + centered overlay:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["showAlert {"," Alert(title: \"Alert\", message: \"Message\")"," .modal()","}"],"type":"codeListing"},{"text":"Event Modifiers","level":2,"anchor":"Event-Modifiers","type":"heading"},{"text":"onKeyPress(_:)","level":3,"anchor":"onKeyPress","type":"heading"},{"inlineContent":[{"text":"Handle keyboard input:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["VStack {"," ContentView()","}",".onKeyPress { event in"," if event.key == .character(\"q\") {"," \/\/ Quit"," return true"," }"," return false","}"],"type":"codeListing"},{"text":"onAppear(_:)","level":3,"anchor":"onAppear","type":"heading"},{"inlineContent":[{"type":"text","text":"Run code when view appears:"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Content\")"," .onAppear {"," print(\"View appeared\")"," }"],"type":"codeListing"},{"text":"onDisappear(_:)","level":3,"anchor":"onDisappear","type":"heading"},{"inlineContent":[{"text":"Run code when view disappears:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Content\")"," .onDisappear {"," print(\"View disappearing\")"," }"],"type":"codeListing"},{"text":"task(_:)","level":3,"anchor":"task","type":"heading"},{"inlineContent":[{"type":"text","text":"Run async code:"}],"type":"paragraph"},{"syntax":"swift","code":["VStack {"," ContentView()","}",".task {"," \/\/ Fetch data"," let data = try await fetchData()","}"],"type":"codeListing"},{"text":"Data Flow Modifiers","level":2,"anchor":"Data-Flow-Modifiers","type":"heading"},{"text":"environment(::)","level":3,"anchor":"environment","type":"heading"},{"inlineContent":[{"type":"text","text":"Pass environment values to children:"}],"type":"paragraph"},{"syntax":"swift","code":["VStack {"," ContentView()","}",".environment(\\.theme, customTheme)"],"type":"codeListing"},{"text":"statusBarItems(_:)","level":3,"anchor":"statusBarItems","type":"heading"},{"inlineContent":[{"text":"Define status bar items:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["VStack {"," ContentView()","}",".statusBarItems {"," StatusBarItem("," label: \"Help\","," shortcut: Shortcut.letter(\"?\"),"," action: { print(\"Help\") }"," )","}"],"type":"codeListing"},{"text":"Combining Modifiers","level":2,"anchor":"Combining-Modifiers","type":"heading"},{"inlineContent":[{"type":"text","text":"Modifiers are applied in order—the order matters:"}],"type":"paragraph"},{"syntax":"swift","code":["\/\/ This looks different...","Text(\"Order matters\")"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)","","\/\/ ...than this","Text(\"Order matters\")"," .border(.rounded)"," .padding(1)"," .foregroundColor(.theme.accent)"],"type":"codeListing"},{"text":"Creating Custom Modifiers","level":3,"anchor":"Creating-Custom-Modifiers","type":"heading"},{"inlineContent":[{"type":"text","text":"Create reusable modifiers:"}],"type":"paragraph"},{"syntax":"swift","code":["struct PrimaryButtonStyle: ViewModifier {"," func body(content: Content) -> some View {"," content"," .bold()"," .foregroundColor(.theme.background)"," .background(.theme.accent)"," .padding(1)"," .border(.rounded)"," }","}","","extension View {"," func primaryButton() -> some View {"," modifier(PrimaryButtonStyle())"," }","}","","\/\/ Usage","Button(\"Click\") { }"," .primaryButton()"],"type":"codeListing"},{"text":"Common Patterns","level":2,"anchor":"Common-Patterns","type":"heading"},{"text":"Centered Text","level":3,"anchor":"Centered-Text","type":"heading"},{"syntax":"swift","code":["Text(\"Centered\")"," .frame(maxWidth: .infinity, alignment: .center)"],"type":"codeListing"},{"text":"Full-Size Container","level":3,"anchor":"Full-Size-Container","type":"heading"},{"syntax":"swift","code":["VStack {"," ContentView()","}",".frame(maxWidth: .infinity, maxHeight: .infinity)"],"type":"codeListing"},{"text":"Bordered Section","level":3,"anchor":"Bordered-Section","type":"heading"},{"syntax":"swift","code":["VStack(spacing: 1) {"," Text(\"Title\").bold()"," ContentView()","}",".padding(1)",".border(.rounded)"],"type":"codeListing"},{"text":"Button Row","level":3,"anchor":"Button-Row","type":"heading"},{"syntax":"swift","code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}",".frame(maxWidth: .infinity, alignment: .trailing)"],"type":"codeListing"},{"text":"Related Topics","level":2,"anchor":"Related-Topics","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"ViewModifier"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/padding(_:)-19gu9"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"View\/frame(width:height:alignment:)","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/border(_:style:)-4xzvw"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/background(_:)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/foregroundColor(_:)","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/overlay(alignment:content:)","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/onKeyPress(_:)"}]}]}],"type":"unorderedList"}],"kind":"content"}],"sections":[],"kind":"article","references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"}}} \ No newline at end of file +{"primaryContentSections":[{"kind":"content","content":[{"type":"heading","level":2,"text":"Overview","anchor":"Overview"},{"inlineContent":[{"type":"text","text":"Modifiers are methods that return a modified copy of a view. Chain them together to build complex layouts and styling:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Hello\")"," .bold()"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)"]},{"type":"heading","level":2,"text":"Layout Modifiers","anchor":"Layout-Modifiers"},{"level":3,"type":"heading","text":"padding(_:)","anchor":"padding"},{"type":"paragraph","inlineContent":[{"text":"Add padding around content:","type":"text"}]},{"code":["Text(\"Content\")"," .padding() \/\/ Default 1 unit"," .padding(2) \/\/ 2 units all sides"," .padding(.top, 1) \/\/ 1 unit top"," .padding(.horizontal, 2) \/\/ 2 units left\/right"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"frame(width:height:alignment:)","anchor":"framewidthheightalignment"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Set fixed size:"}]},{"code":["Text(\"Fixed\")"," .frame(width: 20, height: 5)","","Button(\"Button\")"," .frame(width: 15)"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"frame(minWidth:maxWidth:minHeight:maxHeight:)","anchor":"frameminWidthmaxWidthminHeightmaxHeight"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Set flexible size constraints:"}]},{"code":["Text(\"Flexible\")"," .frame(minWidth: 10, maxWidth: 50)"," .frame(minHeight: 3, maxHeight: 10)","","Text(\"Fill available space\")"," .frame(maxWidth: .infinity, maxHeight: .infinity)"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Color Modifiers","anchor":"Color-Modifiers"},{"level":3,"type":"heading","text":"foregroundColor(_:)","anchor":"foregroundColor"},{"type":"paragraph","inlineContent":[{"text":"Set text color:","type":"text"}]},{"code":["Text(\"Colored\")"," .foregroundColor(.theme.accent)","","Text(\"Green\")"," .foregroundColor(.ansi(.brightGreen))","","Text(\"Custom\")"," .foregroundColor(.hex(\"FF5500\"))"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"background(_:)","anchor":"background"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add background color:"}]},{"code":["Text(\"Background\")"," .background(.theme.accent)"," .foregroundColor(.theme.background)"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Text Styling","anchor":"Text-Styling"},{"level":3,"type":"heading","text":"Bold, Italic, Underline","anchor":"Bold-Italic-Underline"},{"code":["Text(\"Bold\").bold()","Text(\"Italic\").italic()","Text(\"Underline\").underlined()","Text(\"Strikethrough\").strikethrough()","Text(\"Dim\").dimmed()","Text(\"Blinking\").blinking()","Text(\"Inverted\").inverted()"],"syntax":"swift","type":"codeListing"},{"type":"paragraph","inlineContent":[{"text":"Combine multiple modifiers:","type":"text"}]},{"code":["Text(\"Complex\")"," .bold()"," .italic()"," .foregroundColor(.theme.accent)"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Border and Structure","anchor":"Border-and-Structure"},{"level":3,"type":"heading","text":"border(_:)","anchor":"border"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add borders with different styles:"}]},{"code":["Text(\"Bordered\")"," .border(.rounded)","","Text(\"Heavy border\")"," .border(.heavy, width: 2)","","VStack {"," Text(\"Content\")","}",".border(.block, color: .theme.accent)"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Overlay and Compositing","anchor":"Overlay-and-Compositing"},{"level":3,"type":"heading","text":"overlay(_:)","anchor":"overlay"},{"type":"paragraph","inlineContent":[{"text":"Layer content on top:","type":"text"}]},{"code":["Text(\"Background\")"," .overlay {"," Text(\"Foreground\")"," }"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"dimmed()","anchor":"dimmed"},{"type":"paragraph","inlineContent":[{"text":"Reduce visual emphasis:","type":"text"}]},{"code":["VStack {"," Text(\"Normal\")"," Text(\"Dimmed\")"," .dimmed()","}"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"modal()","anchor":"modal"},{"type":"paragraph","inlineContent":[{"text":"Combine dimmed + centered overlay:","type":"text"}]},{"code":["showAlert {"," Alert(title: \"Alert\", message: \"Message\")"," .modal()","}"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Event Modifiers","anchor":"Event-Modifiers"},{"level":3,"type":"heading","text":"onKeyPress(_:)","anchor":"onKeyPress"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Handle keyboard input:"}]},{"code":["VStack {"," ContentView()","}",".onKeyPress { event in"," if event.key == .character(\"q\") {"," \/\/ Quit"," return true"," }"," return false","}"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"onAppear(_:)","anchor":"onAppear"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Run code when view appears:"}]},{"code":["Text(\"Content\")"," .onAppear {"," print(\"View appeared\")"," }"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"onDisappear(_:)","anchor":"onDisappear"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Run code when view disappears:"}]},{"code":["Text(\"Content\")"," .onDisappear {"," print(\"View disappearing\")"," }"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"task(_:)","anchor":"task"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Run async code:"}]},{"code":["VStack {"," ContentView()","}",".task {"," \/\/ Fetch data"," let data = try await fetchData()","}"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Data Flow Modifiers","anchor":"Data-Flow-Modifiers"},{"level":3,"type":"heading","text":"environment(::)","anchor":"environment"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Pass environment values to children:"}]},{"code":["VStack {"," ContentView()","}",".environment(\\.theme, customTheme)"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"statusBarItems(_:)","anchor":"statusBarItems"},{"type":"paragraph","inlineContent":[{"text":"Define status bar items:","type":"text"}]},{"code":["VStack {"," ContentView()","}",".statusBarItems {"," StatusBarItem("," label: \"Help\","," shortcut: Shortcut.letter(\"?\"),"," action: { print(\"Help\") }"," )","}"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Combining Modifiers","anchor":"Combining-Modifiers"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Modifiers are applied in order—the order matters:"}]},{"code":["\/\/ This looks different...","Text(\"Order matters\")"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)","","\/\/ ...than this","Text(\"Order matters\")"," .border(.rounded)"," .padding(1)"," .foregroundColor(.theme.accent)"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"Creating Custom Modifiers","anchor":"Creating-Custom-Modifiers"},{"type":"paragraph","inlineContent":[{"text":"Create reusable modifiers:","type":"text"}]},{"code":["struct PrimaryButtonStyle: ViewModifier {"," func body(content: Content) -> some View {"," content"," .bold()"," .foregroundColor(.theme.background)"," .background(.theme.accent)"," .padding(1)"," .border(.rounded)"," }","}","","extension View {"," func primaryButton() -> some View {"," modifier(PrimaryButtonStyle())"," }","}","","\/\/ Usage","Button(\"Click\") { }"," .primaryButton()"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Common Patterns","anchor":"Common-Patterns"},{"level":3,"type":"heading","text":"Centered Text","anchor":"Centered-Text"},{"code":["Text(\"Centered\")"," .frame(maxWidth: .infinity, alignment: .center)"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"Full-Size Container","anchor":"Full-Size-Container"},{"code":["VStack {"," ContentView()","}",".frame(maxWidth: .infinity, maxHeight: .infinity)"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"Bordered Section","anchor":"Bordered-Section"},{"code":["VStack(spacing: 1) {"," Text(\"Title\").bold()"," ContentView()","}",".padding(1)",".border(.rounded)"],"syntax":"swift","type":"codeListing"},{"level":3,"type":"heading","text":"Button Row","anchor":"Button-Row"},{"code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}",".frame(maxWidth: .infinity, alignment: .trailing)"],"syntax":"swift","type":"codeListing"},{"level":2,"type":"heading","text":"Related Topics","anchor":"Related-Topics"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"code":"View","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"ViewModifier","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/padding(_:)-19gu9"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/frame(width:height:alignment:)","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/border(_:style:)-4xzvw"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/background(_:)","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/foregroundColor(_:)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/overlay(alignment:content:)","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/onKeyPress(_:)"}],"type":"paragraph"}]}]}]}],"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"roleHeading":"Article","role":"article","title":"View Modifiers"},"kind":"article","schemaVersion":{"patch":0,"major":0,"minor":3},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers"},"abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/statemanagement.json b/docs/data/documentation/tuikit/statemanagement.json index 584f0df..d7fa313 100644 --- a/docs/data/documentation/tuikit/statemanagement.json +++ b/docs/data/documentation/tuikit/statemanagement.json @@ -1 +1 @@ -{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","schemaVersion":{"minor":3,"major":0,"patch":0},"metadata":{"title":"State Management","roleHeading":"Article","role":"article"},"primaryContentSections":[{"kind":"content","content":[{"level":2,"text":"Overview","anchor":"Overview","type":"heading"},{"inlineContent":[{"text":"TUIKit provides several mechanisms for managing state:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"@State"}]},{"type":"text","text":": Local view state"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"@Environment"}]},{"text":": Top-down data flow","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"Binding","type":"codeVoice"}]},{"type":"text","text":": Two-way data binding"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"@AppStorage"}]},{"type":"text","text":": Persistent application settings"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"@SceneStorage"}]},{"type":"text","text":": Scene-specific state restoration"}]}]}],"type":"unorderedList"},{"level":2,"text":"@State Property Wrapper","anchor":"State-Property-Wrapper","type":"heading"},{"inlineContent":[{"code":"@State","type":"codeVoice"},{"text":" stores local state within a view and automatically triggers re-renders when the value changes:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["struct Counter: View {"," @State var count: Int = 0",""," var body: some View {"," VStack(spacing: 1) {"," Text(\"Count: \\(count)\")"," .bold()",""," HStack(spacing: 2) {"," Button(\"Decrement\") { count -= 1 }"," Button(\"Increment\") { count += 1 }"," }"," }"," }","}"],"type":"codeListing"},{"level":3,"text":"Rules for @State","anchor":"Rules-for-State","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Declare as ","type":"text"},{"code":"private","type":"codeVoice"},{"text":" to prevent external modification","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Initialize with a default value"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Use only in views, not in view models"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"State is destroyed when view is removed from hierarchy"}]}]}],"type":"unorderedList"},{"syntax":"swift","code":["struct InputForm: View {"," @State private var name: String = \"\""," @State private var age: Int = 0"," @State private var agreed: Bool = false",""," var body: some View {"," VStack(spacing: 1) {"," \/\/ View content"," }"," }","}"],"type":"codeListing"},{"level":2,"text":"Binding","anchor":"Binding","type":"heading"},{"inlineContent":[{"text":"A ","type":"text"},{"code":"Binding","type":"codeVoice"},{"text":" creates a two-way connection between a view and a state variable:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["struct Parent: View {"," @State var isExpanded: Bool = false",""," var body: some View {"," VStack {"," Child(isExpanded: $isExpanded)"," }"," }","}","","struct Child: View {"," @Binding var isExpanded: Bool",""," var body: some View {"," Button(isExpanded ? \"Collapse\" : \"Expand\") {"," isExpanded.toggle()"," }"," }","}"],"type":"codeListing"},{"inlineContent":[{"text":"Use ","type":"text"},{"code":"$","type":"codeVoice"},{"text":" to create a binding to a state property.","type":"text"}],"type":"paragraph"},{"level":3,"text":"Creating Custom Bindings","anchor":"Creating-Custom-Bindings","type":"heading"},{"inlineContent":[{"type":"text","text":"Create computed bindings for complex logic:"}],"type":"paragraph"},{"syntax":"swift","code":["struct FilteredList: View {"," @State private var showDetails: Bool = false",""," var detailsBinding: Binding {"," Binding("," get: { showDetails },"," set: { newValue in"," if newValue {"," print(\"Details opened\")"," }"," showDetails = newValue"," }"," )"," }",""," var body: some View {"," Button(\"Toggle\") {"," detailsBinding.wrappedValue.toggle()"," }"," }","}"],"type":"codeListing"},{"level":2,"text":"@Environment and Environment Keys","anchor":"Environment-and-Environment-Keys","type":"heading"},{"inlineContent":[{"text":"Environment provides top-down data flow to all child views:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["struct App: View {"," var body: some View {"," VStack {"," ContentView()"," .environment(\\.theme, customTheme)"," }"," }","}","","struct ContentView: View {"," @Environment(\\.theme) var theme",""," var body: some View {"," Text(\"Using current theme\")"," .foregroundColor(theme.foreground)"," }","}"],"type":"codeListing"},{"level":3,"text":"Custom Environment Keys","anchor":"Custom-Environment-Keys","type":"heading"},{"inlineContent":[{"type":"text","text":"Define custom environment values:"}],"type":"paragraph"},{"syntax":"swift","code":["struct UserPreferencesKey: EnvironmentKey {"," static let defaultValue = UserPreferences()","}","","extension EnvironmentValues {"," var userPreferences: UserPreferences {"," get { self[UserPreferencesKey.self] }"," set { self[UserPreferencesKey.self] = newValue }"," }","}","","\/\/ Usage","struct App: View {"," var body: some View {"," VStack {"," ContentView()"," .environment(\\.userPreferences, UserPreferences(language: \"de\"))"," }"," }","}","","struct ContentView: View {"," @Environment(\\.userPreferences) var prefs",""," var body: some View {"," Text(\"Language: \\(prefs.language)\")"," }","}"],"type":"codeListing"},{"level":2,"text":"@AppStorage","anchor":"AppStorage","type":"heading"},{"inlineContent":[{"code":"@AppStorage","type":"codeVoice"},{"text":" persists values to storage (UserDefaults on macOS, JSON file on Linux):","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["struct App: View {"," @AppStorage(\"theme\") var selectedTheme: String = \"green\""," @AppStorage(\"fontSize\") var fontSize: Int = 12",""," var body: some View {"," VStack {"," Text(\"Current theme: \\(selectedTheme)\")"," \/\/ Settings UI"," }"," }","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"Changes to "},{"type":"codeVoice","code":"@AppStorage"},{"type":"text","text":" variables are automatically saved and restored across app launches."}],"type":"paragraph"},{"level":2,"text":"@SceneStorage","anchor":"SceneStorage","type":"heading"},{"inlineContent":[{"type":"codeVoice","code":"@SceneStorage"},{"text":" preserves state for the current scene:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["struct MyScene: Scene {"," @SceneStorage(\"selectedTab\") var selectedTab: String = \"home\""," @SceneStorage(\"scrollPosition\") var scrollPosition: Int = 0",""," var body: some Scene {"," WindowGroup {"," VStack {"," if selectedTab == \"home\" {"," HomeView()"," }"," }"," }"," }","}"],"type":"codeListing"},{"level":2,"text":"Data Flow Pattern","anchor":"Data-Flow-Pattern","type":"heading"},{"level":3,"text":"Recommended Pattern","anchor":"Recommended-Pattern","type":"heading"},{"items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Local state"}]},{"type":"text","text":": Use "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" for temporary UI state"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Shared state","type":"text"}]},{"type":"text","text":": Use "},{"type":"codeVoice","code":"@Environment"},{"type":"text","text":" to pass to child views"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Persistent state","type":"text"}],"type":"strong"},{"text":": Use ","type":"text"},{"type":"codeVoice","code":"@AppStorage"},{"text":" for settings","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Child updates"}],"type":"strong"},{"text":": Use ","type":"text"},{"type":"codeVoice","code":"@Binding"},{"text":" to let children modify parent state","type":"text"}]}]}],"type":"orderedList"},{"syntax":"swift","code":["@main","struct MyApp: App {"," \/\/ Persistent settings"," @AppStorage(\"theme\") var theme: String = \"green\"",""," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.theme, themeForString(theme))"," }"," }","}","","struct ContentView: View {"," @Environment(\\.theme) var theme"," @State private var showMenu: Bool = false",""," var body: some View {"," VStack {"," if showMenu {"," MenuView(showing: $showMenu)"," }"," }"," }","}"],"type":"codeListing"},{"level":2,"text":"Related Topics","anchor":"Related-Topics","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"State"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Binding","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"code":"@Environment","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"@AppStorage"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"@SceneStorage"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"EnvironmentKey"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"EnvironmentValues"}]}]}],"type":"unorderedList"}]}],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","interfaceLanguage":"swift"},"sections":[],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"}}} \ No newline at end of file +{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"role":"article","title":"State Management","roleHeading":"Article"},"kind":"article","identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","interfaceLanguage":"swift"},"primaryContentSections":[{"content":[{"anchor":"Overview","level":2,"text":"Overview","type":"heading"},{"inlineContent":[{"text":"TUIKit provides several mechanisms for managing state:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"code":"@State","type":"codeVoice"}],"type":"strong"},{"text":": Local view state","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"@Environment"}]},{"type":"text","text":": Top-down data flow"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"Binding","type":"codeVoice"}]},{"type":"text","text":": Two-way data binding"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"@AppStorage"}]},{"text":": Persistent application settings","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"@SceneStorage"}]},{"type":"text","text":": Scene-specific state restoration"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"State-Property-Wrapper","level":2,"text":"@State Property Wrapper","type":"heading"},{"inlineContent":[{"type":"codeVoice","code":"@State"},{"type":"text","text":" stores local state within a view and automatically triggers re-renders when the value changes:"}],"type":"paragraph"},{"syntax":"swift","code":["struct Counter: View {"," @State var count: Int = 0",""," var body: some View {"," VStack(spacing: 1) {"," Text(\"Count: \\(count)\")"," .bold()",""," HStack(spacing: 2) {"," Button(\"Decrement\") { count -= 1 }"," Button(\"Increment\") { count += 1 }"," }"," }"," }","}"],"type":"codeListing"},{"anchor":"Rules-for-State","level":3,"text":"Rules for @State","type":"heading"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Declare as "},{"type":"codeVoice","code":"private"},{"type":"text","text":" to prevent external modification"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Initialize with a default value","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Use only in views, not in view models","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"State is destroyed when view is removed from hierarchy","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"syntax":"swift","code":["struct InputForm: View {"," @State private var name: String = \"\""," @State private var age: Int = 0"," @State private var agreed: Bool = false",""," var body: some View {"," VStack(spacing: 1) {"," \/\/ View content"," }"," }","}"],"type":"codeListing"},{"anchor":"Binding","level":2,"text":"Binding","type":"heading"},{"inlineContent":[{"type":"text","text":"A "},{"type":"codeVoice","code":"Binding"},{"type":"text","text":" creates a two-way connection between a view and a state variable:"}],"type":"paragraph"},{"type":"codeListing","code":["struct Parent: View {"," @State var isExpanded: Bool = false",""," var body: some View {"," VStack {"," Child(isExpanded: $isExpanded)"," }"," }","}","","struct Child: View {"," @Binding var isExpanded: Bool",""," var body: some View {"," Button(isExpanded ? \"Collapse\" : \"Expand\") {"," isExpanded.toggle()"," }"," }","}"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"code":"$","type":"codeVoice"},{"text":" to create a binding to a state property.","type":"text"}]},{"type":"heading","text":"Creating Custom Bindings","level":3,"anchor":"Creating-Custom-Bindings"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Create computed bindings for complex logic:"}]},{"type":"codeListing","code":["struct FilteredList: View {"," @State private var showDetails: Bool = false",""," var detailsBinding: Binding {"," Binding("," get: { showDetails },"," set: { newValue in"," if newValue {"," print(\"Details opened\")"," }"," showDetails = newValue"," }"," )"," }",""," var body: some View {"," Button(\"Toggle\") {"," detailsBinding.wrappedValue.toggle()"," }"," }","}"],"syntax":"swift"},{"type":"heading","text":"@Environment and Environment Keys","level":2,"anchor":"Environment-and-Environment-Keys"},{"type":"paragraph","inlineContent":[{"text":"Environment provides top-down data flow to all child views:","type":"text"}]},{"type":"codeListing","code":["struct App: View {"," var body: some View {"," VStack {"," ContentView()"," .environment(\\.theme, customTheme)"," }"," }","}","","struct ContentView: View {"," @Environment(\\.theme) var theme",""," var body: some View {"," Text(\"Using current theme\")"," .foregroundColor(theme.foreground)"," }","}"],"syntax":"swift"},{"type":"heading","text":"Custom Environment Keys","level":3,"anchor":"Custom-Environment-Keys"},{"type":"paragraph","inlineContent":[{"text":"Define custom environment values:","type":"text"}]},{"syntax":"swift","code":["struct UserPreferencesKey: EnvironmentKey {"," static let defaultValue = UserPreferences()","}","","extension EnvironmentValues {"," var userPreferences: UserPreferences {"," get { self[UserPreferencesKey.self] }"," set { self[UserPreferencesKey.self] = newValue }"," }","}","","\/\/ Usage","struct App: View {"," var body: some View {"," VStack {"," ContentView()"," .environment(\\.userPreferences, UserPreferences(language: \"de\"))"," }"," }","}","","struct ContentView: View {"," @Environment(\\.userPreferences) var prefs",""," var body: some View {"," Text(\"Language: \\(prefs.language)\")"," }","}"],"type":"codeListing"},{"anchor":"AppStorage","level":2,"text":"@AppStorage","type":"heading"},{"inlineContent":[{"code":"@AppStorage","type":"codeVoice"},{"type":"text","text":" persists values to storage (UserDefaults on macOS, JSON file on Linux):"}],"type":"paragraph"},{"syntax":"swift","code":["struct App: View {"," @AppStorage(\"theme\") var selectedTheme: String = \"green\""," @AppStorage(\"fontSize\") var fontSize: Int = 12",""," var body: some View {"," VStack {"," Text(\"Current theme: \\(selectedTheme)\")"," \/\/ Settings UI"," }"," }","}"],"type":"codeListing"},{"inlineContent":[{"type":"text","text":"Changes to "},{"type":"codeVoice","code":"@AppStorage"},{"type":"text","text":" variables are automatically saved and restored across app launches."}],"type":"paragraph"},{"anchor":"SceneStorage","level":2,"text":"@SceneStorage","type":"heading"},{"inlineContent":[{"type":"codeVoice","code":"@SceneStorage"},{"text":" preserves state for the current scene:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["struct MyScene: Scene {"," @SceneStorage(\"selectedTab\") var selectedTab: String = \"home\""," @SceneStorage(\"scrollPosition\") var scrollPosition: Int = 0",""," var body: some Scene {"," WindowGroup {"," VStack {"," if selectedTab == \"home\" {"," HomeView()"," }"," }"," }"," }","}"]},{"anchor":"Data-Flow-Pattern","type":"heading","level":2,"text":"Data Flow Pattern"},{"anchor":"Recommended-Pattern","type":"heading","level":3,"text":"Recommended Pattern"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Local state"}]},{"text":": Use ","type":"text"},{"type":"codeVoice","code":"@State"},{"text":" for temporary UI state","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Shared state","type":"text"}]},{"type":"text","text":": Use "},{"code":"@Environment","type":"codeVoice"},{"type":"text","text":" to pass to child views"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Persistent state"}],"type":"strong"},{"type":"text","text":": Use "},{"code":"@AppStorage","type":"codeVoice"},{"type":"text","text":" for settings"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Child updates"}],"type":"strong"},{"text":": Use ","type":"text"},{"type":"codeVoice","code":"@Binding"},{"text":" to let children modify parent state","type":"text"}],"type":"paragraph"}]}],"type":"orderedList"},{"syntax":"swift","type":"codeListing","code":["@main","struct MyApp: App {"," \/\/ Persistent settings"," @AppStorage(\"theme\") var theme: String = \"green\"",""," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.theme, themeForString(theme))"," }"," }","}","","struct ContentView: View {"," @Environment(\\.theme) var theme"," @State private var showMenu: Bool = false",""," var body: some View {"," VStack {"," if showMenu {"," MenuView(showing: $showMenu)"," }"," }"," }","}"]},{"anchor":"Related-Topics","type":"heading","level":2,"text":"Related Topics"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"State"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Binding"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"@Environment"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"@AppStorage"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"@SceneStorage"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"EnvironmentKey"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"EnvironmentValues","type":"codeVoice"}]}]}],"type":"unorderedList"}],"kind":"content"}],"schemaVersion":{"major":0,"minor":3,"patch":0},"sections":[],"abstract":[{"type":"text","text":"Learn how to manage application state and data flow in TUIKit."}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/theming.json b/docs/data/documentation/tuikit/theming.json index cafac83..41df56d 100644 --- a/docs/data/documentation/tuikit/theming.json +++ b/docs/data/documentation/tuikit/theming.json @@ -1 +1 @@ -{"sections":[],"kind":"article","hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}],"schemaVersion":{"minor":3,"major":0,"patch":0},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","interfaceLanguage":"swift"},"primaryContentSections":[{"kind":"content","content":[{"type":"heading","anchor":"Built-in-Themes","text":"Built-in Themes","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"TUIKit includes 4 beautiful phosphor-style themes:"}]},{"type":"heading","anchor":"Green-Theme","text":"Green Theme","level":3},{"type":"paragraph","inlineContent":[{"text":"Classic green phosphor aesthetic for a retro terminal feel:","type":"text"}]},{"type":"codeListing","syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .green)"]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Accent"}]},{"type":"text","text":": Bright green"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Background","type":"text"}],"type":"strong"},{"type":"text","text":": Deep dark green"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Foreground","type":"text"}],"type":"strong"},{"text":": Light green text","type":"text"}]}]}]},{"type":"heading","anchor":"Amber-Theme","text":"Amber Theme","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Warm amber\/orange phosphor theme:"}]},{"type":"codeListing","syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .amber)"]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"type":"strong"},{"text":": Bright amber","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Background","type":"text"}]},{"type":"text","text":": Dark brown-orange"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Foreground"}],"type":"strong"},{"text":": Light amber text","type":"text"}]}]}]},{"type":"heading","anchor":"White-Theme","text":"White Theme","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Cool white\/blue-tinted theme for modern appearance:"}]},{"syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .white)"],"type":"codeListing"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Accent","type":"text"}]},{"type":"text","text":": Bright white"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Background"}],"type":"strong"},{"text":": Deep blue-black","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Foreground"}]},{"text":": Light white text","type":"text"}]}]}]},{"text":"Red Theme","type":"heading","level":3,"anchor":"Red-Theme"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Bold red phosphor theme:"}]},{"syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .red)"],"type":"codeListing"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Accent","type":"text"}],"type":"strong"},{"text":": Bright red","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Background","type":"text"}]},{"type":"text","text":": Dark red-black"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Foreground"}],"type":"strong"},{"type":"text","text":": Light red text"}],"type":"paragraph"}]}]},{"text":"Using Themes","type":"heading","level":2,"anchor":"Using-Themes"},{"text":"Default Theme","type":"heading","level":3,"anchor":"Default-Theme"},{"type":"paragraph","inlineContent":[{"type":"text","text":"By default, the Green theme is active:"}]},{"type":"codeListing","code":["@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," }"," }","}"],"syntax":"swift"},{"type":"heading","level":3,"anchor":"Switching-Themes","text":"Switching Themes"},{"type":"paragraph","inlineContent":[{"text":"Use the theme manager to switch themes at runtime:","type":"text"}]},{"type":"codeListing","code":["struct App: View {"," @Environment(\\.themeManager) var themeManager",""," var body: some View {"," VStack {"," Button(\"Switch to Amber\") {"," themeManager.currentTheme = .amber"," }"," Button(\"Switch to White\") {"," themeManager.currentTheme = .white"," }"," }"," }","}"],"syntax":"swift"},{"type":"heading","level":3,"anchor":"Accessing-Theme-Colors","text":"Accessing Theme Colors"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"code":"Color.theme","type":"codeVoice"},{"type":"text","text":" shorthand to access current theme colors:"}]},{"type":"codeListing","code":["VStack {"," Text(\"This uses the theme accent color\")"," .foregroundColor(.theme.accent)",""," Text(\"This uses the theme foreground\")"," .foregroundColor(.theme.foreground)",""," Text(\"This uses secondary text color\")"," .foregroundColor(.theme.foregroundSecondary)","}"],"syntax":"swift"},{"type":"heading","level":2,"anchor":"Theme-Protocol","text":"Theme Protocol"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Themes conform to the "},{"code":"Theme","type":"codeVoice"},{"type":"text","text":" protocol:"}]},{"type":"codeListing","code":["public protocol Theme {"," var background: Color { get }"," var containerBackground: Color { get }"," var containerHeaderBackground: Color { get }"," var buttonBackground: Color { get }"," var statusBarBackground: Color { get }"," var foreground: Color { get }"," var foregroundSecondary: Color { get }"," var foregroundTertiary: Color { get }"," var accent: Color { get }"," var border: Color { get }"," var statusBarForeground: Color { get }","}"],"syntax":"swift"},{"type":"heading","level":2,"anchor":"Creating-Custom-Themes","text":"Creating Custom Themes"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Implement the "},{"type":"codeVoice","code":"Theme"},{"type":"text","text":" protocol to create custom themes:"}]},{"type":"codeListing","code":["struct CompanyTheme: Theme {"," let background = Color.hex(\"0a0a0a\")"," let containerBackground = Color.hex(\"1a1a2e\")"," let containerHeaderBackground = Color.hex(\"16213e\")"," let buttonBackground = Color.hex(\"0f3460\")"," let statusBarBackground = Color.hex(\"0f3460\")"," let foreground = Color.hex(\"eaeaea\")"," let foregroundSecondary = Color.hex(\"999999\")"," let foregroundTertiary = Color.hex(\"666666\")"," let accent = Color.hex(\"00d4ff\")"," let border = Color.hex(\"00d4ff\")"," let statusBarForeground = Color.hex(\"666666\")","}","","\/\/ Use it","@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.themeManager.currentTheme, CompanyTheme())"," }"," }","}"],"syntax":"swift"},{"type":"heading","level":2,"anchor":"Color-System","text":"Color System"},{"type":"paragraph","inlineContent":[{"text":"TUIKit supports multiple color spaces:","type":"text"}]},{"type":"heading","level":3,"anchor":"ANSI-Colors","text":"ANSI Colors"},{"type":"paragraph","inlineContent":[{"text":"Use standard terminal colors:","type":"text"}]},{"type":"codeListing","code":["Color.ansi(.brightGreen)","Color.ansi(.red)"],"syntax":"swift"},{"type":"heading","level":3,"anchor":"Hex-Colors","text":"Hex Colors"},{"type":"paragraph","inlineContent":[{"text":"Specify colors as hex strings or integers:","type":"text"}]},{"type":"codeListing","code":["Color.hex(\"FF5500\")","Color.hex(\"#FF5500\")","Color.hex(0xFF5500)"],"syntax":"swift"},{"type":"heading","level":3,"anchor":"RGB-Colors","text":"RGB Colors"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Define colors by RGB values:"}]},{"type":"codeListing","code":["Color.rgb(red: 255, green: 85, blue: 0)","Color.rgb(red: 1.0, green: 0.33, blue: 0.0)"],"syntax":"swift"},{"type":"heading","level":3,"anchor":"256-Color-Palette","text":"256-Color Palette"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use 256-color terminal palette (0-255):"}]},{"type":"codeListing","code":["Color.palette256(196)"],"syntax":"swift"},{"type":"heading","level":3,"anchor":"HSL-Colors","text":"HSL Colors"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Create colors using HSL (Hue, Saturation, Lightness):"}]},{"type":"codeListing","code":["Color.hsl(hue: 25, saturation: 100, lightness: 50)"],"syntax":"swift"},{"type":"heading","level":2,"anchor":"Color-Modifiers","text":"Color Modifiers"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Adjust colors programmatically:"}]},{"type":"codeListing","code":["let baseColor = Color.hex(\"#FF5500\")","","let lighter = baseColor.lighter(by: 0.2)","let darker = baseColor.darker(by: 0.3)","let transparent = baseColor.opacity(0.5)"],"syntax":"swift"},{"type":"heading","level":2,"anchor":"Theme-Cycling","text":"Theme Cycling"},{"type":"paragraph","inlineContent":[{"type":"text","text":"The example app supports theme cycling with the "},{"type":"codeVoice","code":"t"},{"type":"text","text":" key:"}]},{"type":"codeListing","code":["@main","struct ExampleApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," .statusBarItems {"," StatusBarItem("," label: \"Theme\","," shortcut: Shortcut.letter(\"t\"),"," action: {"," \/\/ Cycle themes"," }"," )"," }"," }"," }","}"],"syntax":"swift"},{"type":"heading","level":2,"anchor":"Best-Practices","text":"Best Practices"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Use semantic colors","type":"text"}]},{"type":"text","text":": Reference "},{"code":"Color.theme.accent","type":"codeVoice"},{"type":"text","text":" instead of hardcoding colors"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Test readability","type":"text"}]},{"type":"text","text":": Ensure sufficient contrast in custom themes"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Support all modes"}]},{"type":"text","text":": Create both dark and light themed colors if needed"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Store preferences","type":"text"}],"type":"strong"},{"type":"text","text":": Use "},{"code":"@AppStorage","type":"codeVoice"},{"type":"text","text":" to remember user theme choice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Provide visual feedback","type":"text"}]},{"text":": Show current theme in settings","type":"text"}],"type":"paragraph"}]}]},{"type":"heading","level":2,"anchor":"Related-Topics","text":"Related Topics"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"Color","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Theme"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"ThemeManager"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","isActive":true}]}]},{"content":[{"type":"paragraph","inlineContent":[{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference","isActive":true}]}]}]}]}],"metadata":{"roleHeading":"Article","role":"article","title":"Theming System"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article","kind":"article","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"title":"Appearance System","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article","url":"\/documentation\/tuikit\/statemanagement","type":"topic","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","title":"State Management"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"}}} \ No newline at end of file +{"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},"kind":"article","primaryContentSections":[{"kind":"content","content":[{"anchor":"Built-in-Themes","text":"Built-in Themes","type":"heading","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"TUIKit includes 4 beautiful phosphor-style themes:"}]},{"anchor":"Green-Theme","text":"Green Theme","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"text":"Classic green phosphor aesthetic for a retro terminal feel:","type":"text"}]},{"syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .green)"],"type":"codeListing"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"type":"strong"},{"text":": Bright green","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Background"}],"type":"strong"},{"text":": Deep dark green","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Foreground"}],"type":"strong"},{"type":"text","text":": Light green text"}]}]}],"type":"unorderedList"},{"anchor":"Amber-Theme","text":"Amber Theme","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Warm amber\/orange phosphor theme:"}]},{"syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .amber)"],"type":"codeListing"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"type":"strong"},{"text":": Bright amber","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Background","type":"text"}],"type":"strong"},{"text":": Dark brown-orange","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Foreground","type":"text"}]},{"text":": Light amber text","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"White-Theme","text":"White Theme","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Cool white\/blue-tinted theme for modern appearance:"}]},{"syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .white)"],"type":"codeListing"},{"items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Accent","type":"text"}]},{"type":"text","text":": Bright white"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Background","type":"text"}]},{"type":"text","text":": Deep blue-black"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Foreground","type":"text"}],"type":"strong"},{"type":"text","text":": Light white text"}]}]}],"type":"unorderedList"},{"anchor":"Red-Theme","text":"Red Theme","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"text":"Bold red phosphor theme:","type":"text"}]},{"syntax":"swift","code":[".environment(\\.themeManager.currentTheme, .red)"],"type":"codeListing"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"type":"strong"},{"text":": Bright red","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Background"}],"type":"strong"},{"type":"text","text":": Dark red-black"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Foreground","type":"text"}],"type":"strong"},{"type":"text","text":": Light red text"}]}]}],"type":"unorderedList"},{"anchor":"Using-Themes","text":"Using Themes","type":"heading","level":2},{"anchor":"Default-Theme","text":"Default Theme","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"By default, the Green theme is active:"}]},{"syntax":"swift","code":["@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," }"," }","}"],"type":"codeListing"},{"anchor":"Switching-Themes","text":"Switching Themes","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"text":"Use the theme manager to switch themes at runtime:","type":"text"}]},{"syntax":"swift","code":["struct App: View {"," @Environment(\\.themeManager) var themeManager",""," var body: some View {"," VStack {"," Button(\"Switch to Amber\") {"," themeManager.currentTheme = .amber"," }"," Button(\"Switch to White\") {"," themeManager.currentTheme = .white"," }"," }"," }","}"],"type":"codeListing"},{"anchor":"Accessing-Theme-Colors","text":"Accessing Theme Colors","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"code":"Color.theme","type":"codeVoice"},{"text":" shorthand to access current theme colors:","type":"text"}]},{"syntax":"swift","code":["VStack {"," Text(\"This uses the theme accent color\")"," .foregroundColor(.theme.accent)",""," Text(\"This uses the theme foreground\")"," .foregroundColor(.theme.foreground)",""," Text(\"This uses secondary text color\")"," .foregroundColor(.theme.foregroundSecondary)","}"],"type":"codeListing"},{"anchor":"Theme-Protocol","text":"Theme Protocol","type":"heading","level":2},{"type":"paragraph","inlineContent":[{"text":"Themes conform to the ","type":"text"},{"type":"codeVoice","code":"Theme"},{"text":" protocol:","type":"text"}]},{"syntax":"swift","code":["public protocol Theme {"," var background: Color { get }"," var containerBackground: Color { get }"," var containerHeaderBackground: Color { get }"," var buttonBackground: Color { get }"," var statusBarBackground: Color { get }"," var foreground: Color { get }"," var foregroundSecondary: Color { get }"," var foregroundTertiary: Color { get }"," var accent: Color { get }"," var border: Color { get }"," var statusBarForeground: Color { get }","}"],"type":"codeListing"},{"anchor":"Creating-Custom-Themes","text":"Creating Custom Themes","type":"heading","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"Implement the "},{"code":"Theme","type":"codeVoice"},{"type":"text","text":" protocol to create custom themes:"}]},{"syntax":"swift","code":["struct CompanyTheme: Theme {"," let background = Color.hex(\"0a0a0a\")"," let containerBackground = Color.hex(\"1a1a2e\")"," let containerHeaderBackground = Color.hex(\"16213e\")"," let buttonBackground = Color.hex(\"0f3460\")"," let statusBarBackground = Color.hex(\"0f3460\")"," let foreground = Color.hex(\"eaeaea\")"," let foregroundSecondary = Color.hex(\"999999\")"," let foregroundTertiary = Color.hex(\"666666\")"," let accent = Color.hex(\"00d4ff\")"," let border = Color.hex(\"00d4ff\")"," let statusBarForeground = Color.hex(\"666666\")","}","","\/\/ Use it","@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.themeManager.currentTheme, CompanyTheme())"," }"," }","}"],"type":"codeListing"},{"anchor":"Color-System","text":"Color System","type":"heading","level":2},{"type":"paragraph","inlineContent":[{"text":"TUIKit supports multiple color spaces:","type":"text"}]},{"anchor":"ANSI-Colors","text":"ANSI Colors","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use standard terminal colors:"}]},{"syntax":"swift","code":["Color.ansi(.brightGreen)","Color.ansi(.red)"],"type":"codeListing"},{"anchor":"Hex-Colors","text":"Hex Colors","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"text":"Specify colors as hex strings or integers:","type":"text"}]},{"syntax":"swift","code":["Color.hex(\"FF5500\")","Color.hex(\"#FF5500\")","Color.hex(0xFF5500)"],"type":"codeListing"},{"anchor":"RGB-Colors","text":"RGB Colors","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Define colors by RGB values:"}]},{"syntax":"swift","code":["Color.rgb(red: 255, green: 85, blue: 0)","Color.rgb(red: 1.0, green: 0.33, blue: 0.0)"],"type":"codeListing"},{"anchor":"256-Color-Palette","text":"256-Color Palette","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use 256-color terminal palette (0-255):"}]},{"syntax":"swift","code":["Color.palette256(196)"],"type":"codeListing"},{"anchor":"HSL-Colors","text":"HSL Colors","type":"heading","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Create colors using HSL (Hue, Saturation, Lightness):"}]},{"syntax":"swift","code":["Color.hsl(hue: 25, saturation: 100, lightness: 50)"],"type":"codeListing"},{"anchor":"Color-Modifiers","text":"Color Modifiers","type":"heading","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"Adjust colors programmatically:"}]},{"syntax":"swift","code":["let baseColor = Color.hex(\"#FF5500\")","","let lighter = baseColor.lighter(by: 0.2)","let darker = baseColor.darker(by: 0.3)","let transparent = baseColor.opacity(0.5)"],"type":"codeListing"},{"anchor":"Theme-Cycling","text":"Theme Cycling","type":"heading","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"The example app supports theme cycling with the "},{"type":"codeVoice","code":"t"},{"type":"text","text":" key:"}]},{"syntax":"swift","code":["@main","struct ExampleApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," .statusBarItems {"," StatusBarItem("," label: \"Theme\","," shortcut: Shortcut.letter(\"t\"),"," action: {"," \/\/ Cycle themes"," }"," )"," }"," }"," }","}"],"type":"codeListing"},{"anchor":"Best-Practices","text":"Best Practices","type":"heading","level":2},{"items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Use semantic colors","type":"text"}]},{"type":"text","text":": Reference "},{"type":"codeVoice","code":"Color.theme.accent"},{"type":"text","text":" instead of hardcoding colors"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Test readability","type":"text"}]},{"type":"text","text":": Ensure sufficient contrast in custom themes"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Support all modes","type":"text"}],"type":"strong"},{"text":": Create both dark and light themed colors if needed","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Store preferences","type":"text"}]},{"type":"text","text":": Use "},{"code":"@AppStorage","type":"codeVoice"},{"type":"text","text":" to remember user theme choice"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Provide visual feedback"}]},{"text":": Show current theme in settings","type":"text"}],"type":"paragraph"}]}],"type":"orderedList"},{"anchor":"Related-Topics","text":"Related Topics","type":"heading","level":2},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Color"}]}]},{"content":[{"inlineContent":[{"code":"Theme","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"ThemeManager"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","isActive":true,"type":"reference"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true}]}]}],"type":"unorderedList"}]}],"sections":[],"metadata":{"title":"Theming System","role":"article","roleHeading":"Article"},"schemaVersion":{"major":0,"patch":0,"minor":3},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","abstract":[{"text":"Learn about the 5 structural appearance styles for rendering borders and containers.","type":"text"}],"type":"topic","kind":"article","role":"article","title":"Appearance System","url":"\/documentation\/tuikit\/appearance"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/viewhierarchy.json b/docs/data/documentation/tuikit/viewhierarchy.json index 0738671..46a3702 100644 --- a/docs/data/documentation/tuikit/viewhierarchy.json +++ b/docs/data/documentation/tuikit/viewhierarchy.json @@ -1 +1 @@ -{"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","interfaceLanguage":"swift"},"schemaVersion":{"major":0,"patch":0,"minor":3},"abstract":[{"text":"Learn how TUIKit’s declarative view model works and how to compose views effectively.","type":"text"}],"primaryContentSections":[{"kind":"content","content":[{"level":2,"anchor":"The-View-Protocol","text":"The View Protocol","type":"heading"},{"inlineContent":[{"type":"text","text":"Everything in TUIKit conforms to the "},{"type":"codeVoice","code":"View"},{"type":"text","text":" protocol. A view is a lightweight value type that describes a piece of UI:"}],"type":"paragraph"},{"code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"text":"Views are ","type":"text"},{"type":"strong","inlineContent":[{"text":"not","type":"text"}]},{"text":" the rendered output—they’re descriptions of UI that get rendered when needed.","type":"text"}],"type":"paragraph"},{"level":3,"anchor":"Primitive-Views","text":"Primitive Views","type":"heading"},{"inlineContent":[{"type":"text","text":"Some views have "},{"type":"codeVoice","code":"body: Never"},{"type":"text","text":" and directly conform to "},{"type":"codeVoice","code":"Renderable"},{"type":"text","text":". These render their own content:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Text"}]},{"type":"text","text":": Display text with styling"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"Button","type":"codeVoice"}],"type":"strong"},{"text":": Interactive clickable element","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"Menu","type":"codeVoice"}]},{"type":"text","text":": Selection menu with keyboard navigation"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Spacer"}],"type":"strong"},{"type":"text","text":": Occupy available space"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Divider"}]},{"type":"text","text":": Horizontal or vertical separator"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"EmptyView"}],"type":"strong"},{"type":"text","text":": Invisible placeholder view"}]}]}],"type":"unorderedList"},{"level":3,"anchor":"Composite-Views","text":"Composite Views","type":"heading"},{"inlineContent":[{"text":"Most views define a ","type":"text"},{"code":"body","type":"codeVoice"},{"text":" that combines other views:","type":"text"}],"type":"paragraph"},{"code":["struct MyCard: View {"," var body: some View {"," VStack(spacing: 1) {"," Text(\"Title\").bold()"," Text(\"Content\")"," }"," .border(.rounded)"," }","}"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"type":"text","text":"Composite views don’t render directly—the renderer walks the view tree and renders primitives."}],"type":"paragraph"},{"level":2,"anchor":"Container-Views","text":"Container Views","type":"heading"},{"level":3,"anchor":"VStack-Vertical-Stack","text":"VStack (Vertical Stack)","type":"heading"},{"inlineContent":[{"text":"Stack views vertically with optional spacing:","type":"text"}],"type":"paragraph"},{"code":["VStack(spacing: 1) {"," Text(\"First\")"," Text(\"Second\")"," Text(\"Third\")","}"],"syntax":"swift","type":"codeListing"},{"level":3,"anchor":"HStack-Horizontal-Stack","text":"HStack (Horizontal Stack)","type":"heading"},{"inlineContent":[{"type":"text","text":"Stack views horizontally:"}],"type":"paragraph"},{"code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}"],"syntax":"swift","type":"codeListing"},{"level":3,"anchor":"ZStack-Depth-Stack","text":"ZStack (Depth Stack)","type":"heading"},{"inlineContent":[{"text":"Layer views on top of each other:","type":"text"}],"type":"paragraph"},{"code":["ZStack {"," Text(\"Background\")"," Text(\"Foreground\")","}"],"syntax":"swift","type":"codeListing"},{"level":3,"anchor":"ForEach","text":"ForEach","type":"heading"},{"inlineContent":[{"type":"text","text":"Render a collection of items:"}],"type":"paragraph"},{"code":["ForEach(items) { item in"," Text(item.name)","}"],"syntax":"swift","type":"codeListing"},{"level":2,"anchor":"Control-Flow","text":"Control Flow","type":"heading"},{"level":3,"anchor":"Conditionals","text":"Conditionals","type":"heading"},{"inlineContent":[{"text":"Use standard Swift ","type":"text"},{"code":"if","type":"codeVoice"},{"text":" statements:","type":"text"}],"type":"paragraph"},{"code":["if isLoading {"," Text(\"Loading...\")","} else {"," Text(\"Loaded!\")","}"],"syntax":"swift","type":"codeListing"},{"level":3,"anchor":"Optional-Values","text":"Optional Values","type":"heading"},{"inlineContent":[{"type":"text","text":"Handle optional views:"}],"type":"paragraph"},{"code":["if let name = userName {"," Text(\"Hello, \\(name)\")","} else {"," Text(\"Not logged in\")","}"],"syntax":"swift","type":"codeListing"},{"level":2,"anchor":"The-ViewBuilder-Result-Builder","text":"The ViewBuilder Result Builder","type":"heading"},{"inlineContent":[{"code":"@ViewBuilder","type":"codeVoice"},{"text":" is a result builder that enables the declarative syntax:","type":"text"}],"type":"paragraph"},{"code":["@ViewBuilder","var content: some View {"," if condition {"," Text(\"A\")"," } else {"," Text(\"B\")"," }"," Text(\"C\")","}"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"type":"text","text":"It supports:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Up to 10 children without nesting"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"if\/else if\/else"},{"type":"text","text":" conditionals"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"if let"},{"type":"text","text":" optional unwrapping"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Arrays and "},{"type":"codeVoice","code":"ForEach"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Nested result builders","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"anchor":"Type-Erasure-with-AnyView","text":"Type Erasure with AnyView","type":"heading"},{"inlineContent":[{"text":"When you need to return different view types, use ","type":"text"},{"code":"AnyView","type":"codeVoice"},{"text":":","type":"text"}],"type":"paragraph"},{"code":["func makeView(condition: Bool) -> AnyView {"," if condition {"," return AnyView(Text(\"A\"))"," } else {"," return AnyView(VStack { Text(\"B\") })"," }","}"],"syntax":"swift","type":"codeListing"},{"style":"note","name":"Note","content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"AnyView"},{"type":"text","text":" sparingly—prefer "},{"type":"codeVoice","code":"@ViewBuilder"},{"type":"text","text":" when possible."}]}],"type":"aside"},{"level":2,"anchor":"Custom-Views","text":"Custom Views","type":"heading"},{"inlineContent":[{"text":"Create your own reusable components:","type":"text"}],"type":"paragraph"},{"code":["struct CustomButton: View {"," let label: String"," let action: () -> Void",""," var body: some View {"," Button(label, action: action)"," .padding(1)"," .border(.rounded)"," }","}","","\/\/ Usage","CustomButton(label: \"Click me\", action: {"," print(\"Clicked\")","})"],"syntax":"swift","type":"codeListing"},{"level":2,"anchor":"View-Composition-Pattern","text":"View Composition Pattern","type":"heading"},{"inlineContent":[{"type":"text","text":"Build complex UIs by composing smaller views:"}],"type":"paragraph"},{"code":["struct ContentView: View {"," var body: some View {"," VStack(spacing: 1) {"," HeaderView()"," BodyView()"," FooterView()"," }"," }","}","","struct HeaderView: View {"," var body: some View {"," Text(\"Header\").bold()"," }","}","","struct BodyView: View {"," var body: some View {"," Text(\"Content\").padding(1)"," }","}","","struct FooterView: View {"," var body: some View {"," Text(\"Footer\")"," }","}"],"syntax":"swift","type":"codeListing"},{"level":2,"anchor":"View-Lifetime","text":"View Lifetime","type":"heading"},{"inlineContent":[{"type":"text","text":"Views are value types—they’re created, rendered, and discarded. They don’t have persistent storage. Use "},{"code":"@State","type":"codeVoice"},{"type":"text","text":" for state that persists across renders:"}],"type":"paragraph"},{"code":["struct Counter: View {"," @State var count: Int = 0",""," var body: some View {"," VStack {"," Text(\"Count: \\(count)\")"," Button(\"Increment\") { count += 1 }"," }"," }","}"],"syntax":"swift","type":"codeListing"},{"level":2,"anchor":"Related-Topics","text":"Related Topics","type":"heading"},{"items":[{"content":[{"inlineContent":[{"type":"codeVoice","code":"View"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"@ViewBuilder"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"VStack"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"HStack"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"ZStack"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true}]}]},{"content":[{"inlineContent":[{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers"}],"type":"paragraph"}]}],"type":"unorderedList"}]}],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"title":"Understanding the View Hierarchy","roleHeading":"Article","role":"article"},"kind":"article","references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","type":"topic","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","url":"\/documentation\/tuikit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"kind":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}],"url":"\/documentation\/tuikit\/modifiers","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","title":"View Modifiers"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article","url":"\/documentation\/tuikit\/statemanagement","type":"topic","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"kind":"article","title":"State Management"}}} \ No newline at end of file +{"metadata":{"title":"Understanding the View Hierarchy","roleHeading":"Article","role":"article"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"text":"Learn how TUIKit’s declarative view model works and how to compose views effectively.","type":"text"}],"kind":"article","sections":[],"primaryContentSections":[{"kind":"content","content":[{"level":2,"text":"The View Protocol","anchor":"The-View-Protocol","type":"heading"},{"inlineContent":[{"text":"Everything in TUIKit conforms to the ","type":"text"},{"type":"codeVoice","code":"View"},{"text":" protocol. A view is a lightweight value type that describes a piece of UI:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"]},{"inlineContent":[{"text":"Views are ","type":"text"},{"inlineContent":[{"type":"text","text":"not"}],"type":"strong"},{"text":" the rendered output—they’re descriptions of UI that get rendered when needed.","type":"text"}],"type":"paragraph"},{"level":3,"text":"Primitive Views","anchor":"Primitive-Views","type":"heading"},{"inlineContent":[{"text":"Some views have ","type":"text"},{"code":"body: Never","type":"codeVoice"},{"text":" and directly conform to ","type":"text"},{"code":"Renderable","type":"codeVoice"},{"text":". These render their own content:","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Text"}],"type":"strong"},{"type":"text","text":": Display text with styling"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"Button","type":"codeVoice"}],"type":"strong"},{"text":": Interactive clickable element","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Menu"}],"type":"strong"},{"type":"text","text":": Selection menu with keyboard navigation"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Spacer"}]},{"type":"text","text":": Occupy available space"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"Divider","type":"codeVoice"}],"type":"strong"},{"text":": Horizontal or vertical separator","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"EmptyView"}]},{"text":": Invisible placeholder view","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":3,"text":"Composite Views","anchor":"Composite-Views","type":"heading"},{"inlineContent":[{"text":"Most views define a ","type":"text"},{"code":"body","type":"codeVoice"},{"text":" that combines other views:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["struct MyCard: View {"," var body: some View {"," VStack(spacing: 1) {"," Text(\"Title\").bold()"," Text(\"Content\")"," }"," .border(.rounded)"," }","}"]},{"inlineContent":[{"type":"text","text":"Composite views don’t render directly—the renderer walks the view tree and renders primitives."}],"type":"paragraph"},{"level":2,"text":"Container Views","anchor":"Container-Views","type":"heading"},{"level":3,"text":"VStack (Vertical Stack)","anchor":"VStack-Vertical-Stack","type":"heading"},{"inlineContent":[{"type":"text","text":"Stack views vertically with optional spacing:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["VStack(spacing: 1) {"," Text(\"First\")"," Text(\"Second\")"," Text(\"Third\")","}"]},{"level":3,"text":"HStack (Horizontal Stack)","anchor":"HStack-Horizontal-Stack","type":"heading"},{"inlineContent":[{"text":"Stack views horizontally:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}"]},{"level":3,"text":"ZStack (Depth Stack)","anchor":"ZStack-Depth-Stack","type":"heading"},{"inlineContent":[{"text":"Layer views on top of each other:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["ZStack {"," Text(\"Background\")"," Text(\"Foreground\")","}"]},{"level":3,"text":"ForEach","anchor":"ForEach","type":"heading"},{"inlineContent":[{"type":"text","text":"Render a collection of items:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["ForEach(items) { item in"," Text(item.name)","}"]},{"level":2,"text":"Control Flow","anchor":"Control-Flow","type":"heading"},{"level":3,"text":"Conditionals","anchor":"Conditionals","type":"heading"},{"inlineContent":[{"text":"Use standard Swift ","type":"text"},{"code":"if","type":"codeVoice"},{"text":" statements:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["if isLoading {"," Text(\"Loading...\")","} else {"," Text(\"Loaded!\")","}"]},{"level":3,"text":"Optional Values","anchor":"Optional-Values","type":"heading"},{"inlineContent":[{"type":"text","text":"Handle optional views:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["if let name = userName {"," Text(\"Hello, \\(name)\")","} else {"," Text(\"Not logged in\")","}"]},{"level":2,"text":"The ViewBuilder Result Builder","anchor":"The-ViewBuilder-Result-Builder","type":"heading"},{"inlineContent":[{"code":"@ViewBuilder","type":"codeVoice"},{"type":"text","text":" is a result builder that enables the declarative syntax:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["@ViewBuilder","var content: some View {"," if condition {"," Text(\"A\")"," } else {"," Text(\"B\")"," }"," Text(\"C\")","}"]},{"inlineContent":[{"type":"text","text":"It supports:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Up to 10 children without nesting"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"if\/else if\/else"},{"text":" conditionals","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"if let"},{"type":"text","text":" optional unwrapping"}]}]},{"content":[{"inlineContent":[{"text":"Arrays and ","type":"text"},{"code":"ForEach","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Nested result builders"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"text":"Type Erasure with AnyView","anchor":"Type-Erasure-with-AnyView","type":"heading"},{"inlineContent":[{"type":"text","text":"When you need to return different view types, use "},{"type":"codeVoice","code":"AnyView"},{"type":"text","text":":"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["func makeView(condition: Bool) -> AnyView {"," if condition {"," return AnyView(Text(\"A\"))"," } else {"," return AnyView(VStack { Text(\"B\") })"," }","}"]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"code":"AnyView","type":"codeVoice"},{"type":"text","text":" sparingly—prefer "},{"code":"@ViewBuilder","type":"codeVoice"},{"type":"text","text":" when possible."}]}],"name":"Note","type":"aside","style":"note"},{"level":2,"text":"Custom Views","anchor":"Custom-Views","type":"heading"},{"inlineContent":[{"type":"text","text":"Create your own reusable components:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["struct CustomButton: View {"," let label: String"," let action: () -> Void",""," var body: some View {"," Button(label, action: action)"," .padding(1)"," .border(.rounded)"," }","}","","\/\/ Usage","CustomButton(label: \"Click me\", action: {"," print(\"Clicked\")","})"]},{"level":2,"text":"View Composition Pattern","anchor":"View-Composition-Pattern","type":"heading"},{"inlineContent":[{"type":"text","text":"Build complex UIs by composing smaller views:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["struct ContentView: View {"," var body: some View {"," VStack(spacing: 1) {"," HeaderView()"," BodyView()"," FooterView()"," }"," }","}","","struct HeaderView: View {"," var body: some View {"," Text(\"Header\").bold()"," }","}","","struct BodyView: View {"," var body: some View {"," Text(\"Content\").padding(1)"," }","}","","struct FooterView: View {"," var body: some View {"," Text(\"Footer\")"," }","}"]},{"level":2,"text":"View Lifetime","anchor":"View-Lifetime","type":"heading"},{"inlineContent":[{"text":"Views are value types—they’re created, rendered, and discarded. They don’t have persistent storage. Use ","type":"text"},{"code":"@State","type":"codeVoice"},{"text":" for state that persists across renders:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["struct Counter: View {"," @State var count: Int = 0",""," var body: some View {"," VStack {"," Text(\"Count: \\(count)\")"," Button(\"Increment\") { count += 1 }"," }"," }","}"]},{"level":2,"text":"Related Topics","anchor":"Related-Topics","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"View","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"code":"@ViewBuilder","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"VStack"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"HStack"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"ZStack","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"reference","isActive":true}]}]}],"type":"unorderedList"}]}],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","interfaceLanguage":"swift"},"schemaVersion":{"patch":0,"minor":3,"major":0},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","abstract":[],"kind":"article","role":"collection","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"title":"View Modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","url":"\/documentation\/tuikit\/modifiers","role":"article","type":"topic","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"role":"article","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"topic","kind":"article","title":"State Management","url":"\/documentation\/tuikit\/statemanagement"}}} \ No newline at end of file diff --git a/docs/documentation/tuikit/appearance/index.html b/docs/documentation/tuikit/appearance/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/appearance/index.html +++ b/docs/documentation/tuikit/appearance/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/architecture/index.html b/docs/documentation/tuikit/architecture/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/architecture/index.html +++ b/docs/documentation/tuikit/architecture/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/buildinteractivemenu/index.html b/docs/documentation/tuikit/buildinteractivemenu/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/buildinteractivemenu/index.html +++ b/docs/documentation/tuikit/buildinteractivemenu/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/buildthemableui/index.html b/docs/documentation/tuikit/buildthemableui/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/buildthemableui/index.html +++ b/docs/documentation/tuikit/buildthemableui/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/buildyourfirstapp/index.html b/docs/documentation/tuikit/buildyourfirstapp/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/buildyourfirstapp/index.html +++ b/docs/documentation/tuikit/buildyourfirstapp/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/focus/index.html b/docs/documentation/tuikit/focus/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/focus/index.html +++ b/docs/documentation/tuikit/focus/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/gettingstarted/index.html b/docs/documentation/tuikit/gettingstarted/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/gettingstarted/index.html +++ b/docs/documentation/tuikit/gettingstarted/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/index.html b/docs/documentation/tuikit/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/index.html +++ b/docs/documentation/tuikit/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/modifiers/index.html b/docs/documentation/tuikit/modifiers/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/modifiers/index.html +++ b/docs/documentation/tuikit/modifiers/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/statemanagement/index.html b/docs/documentation/tuikit/statemanagement/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/statemanagement/index.html +++ b/docs/documentation/tuikit/statemanagement/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/theming/index.html b/docs/documentation/tuikit/theming/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/theming/index.html +++ b/docs/documentation/tuikit/theming/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/documentation/tuikit/viewhierarchy/index.html b/docs/documentation/tuikit/viewhierarchy/index.html index 6a14b69..30247be 100644 --- a/docs/documentation/tuikit/viewhierarchy/index.html +++ b/docs/documentation/tuikit/viewhierarchy/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6a14b69..30247be 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Documentation
\ No newline at end of file +Documentation
\ No newline at end of file diff --git a/docs/metadata.json b/docs/metadata.json index 6a2d24c..4ce091d 100644 --- a/docs/metadata.json +++ b/docs/metadata.json @@ -1 +1 @@ -{"bundleID":"com.anthropic.tuikit.documentation","bundleDisplayName":"TUIKit","schemaVersion":{"patch":0,"major":0,"minor":1}} \ No newline at end of file +{"schemaVersion":{"patch":0,"major":0,"minor":1},"bundleDisplayName":"TUIKit","bundleID":"com.anthropic.tuikit.documentation"} \ No newline at end of file