From 05c2c3fe09db22d7d052378e2e67e69624775889 Mon Sep 17 00:00:00 2001 From: phranck Date: Thu, 29 Jan 2026 06:53:02 +0000 Subject: [PATCH] docs: Update DocC documentation --- docs/CNAME | 1 - 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/metadata.json | 2 +- 14 files changed, 13 insertions(+), 14 deletions(-) delete mode 100644 docs/CNAME diff --git a/docs/CNAME b/docs/CNAME deleted file mode 100644 index 668aba9..0000000 --- a/docs/CNAME +++ /dev/null @@ -1 +0,0 @@ -docs-tuikit.layered.work \ No newline at end of file diff --git a/docs/data/documentation/tuikit.json b/docs/data/documentation/tuikit.json index 8917814..c6f484b 100644 --- a/docs/data/documentation/tuikit.json +++ b/docs/data/documentation/tuikit.json @@ -1 +1 @@ -{"topicSections":[{"anchor":"Articles","title":"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"],"generated":true}],"metadata":{"title":"TUIKit","role":"collection"},"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","interfaceLanguage":"swift"},"kind":"article","hierarchy":{"paths":[[]]},"schemaVersion":{"minor":3,"patch":0,"major":0},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"role":"article","url":"\/documentation\/tuikit\/modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"title":"View Modifiers","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"role":"article","kind":"article","url":"\/documentation\/tuikit\/focus","title":"Focus Management","abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/GettingStarted":{"abstract":[{"text":"Create your first terminal user interface in minutes.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","type":"topic","url":"\/documentation\/tuikit\/gettingstarted","kind":"article","title":"Getting Started with TUIKit","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","title":"Theming System","abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"title":"Appearance System","type":"topic","kind":"article","url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"abstract":[{"text":"Understand the architecture and design patterns that power TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","kind":"article","role":"article","url":"\/documentation\/tuikit\/architecture","title":"Architecture Overview","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","type":"topic","url":"\/documentation\/tuikit\/buildinteractivemenu","title":"Building an Interactive Menu","role":"article","kind":"article","abstract":[{"type":"text","text":"Create a navigation menu with keyboard shortcuts and status bar hints."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"kind":"article","abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"url":"\/documentation\/tuikit\/viewhierarchy","title":"Understanding the View Hierarchy","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","role":"article","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"url":"\/documentation\/tuikit\/buildthemableui","abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"kind":"article","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","role":"article","title":"Building a Themable UI"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"role":"article","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","url":"\/documentation\/tuikit\/buildyourfirstapp","title":"Building Your First App","kind":"article","abstract":[{"type":"text","text":"Create a simple counter application to learn TUIKit basics."}]}}} \ No newline at end of file +{"hierarchy":{"paths":[[]]},"metadata":{"title":"TUIKit","role":"collection"},"kind":"article","schemaVersion":{"major":0,"minor":3,"patch":0},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"},"sections":[],"topicSections":[{"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","anchor":"Articles","generated":true}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"topic","role":"article","kind":"article","title":"View Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"url":"\/documentation\/tuikit\/modifiers"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/GettingStarted":{"title":"Getting Started with TUIKit","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","abstract":[{"text":"Create your first terminal user interface in minutes.","type":"text"}],"url":"\/documentation\/tuikit\/gettingstarted","role":"article","type":"topic","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"type":"topic","abstract":[{"type":"text","text":"Understand how keyboard navigation and focus works in TUIKit."}],"title":"Focus Management","role":"article","url":"\/documentation\/tuikit\/focus","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","title":"Appearance System","url":"\/documentation\/tuikit\/appearance","kind":"article","abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"title":"Building an Interactive Menu","type":"topic","abstract":[{"text":"Create a navigation menu with keyboard shortcuts and status bar hints.","type":"text"}],"url":"\/documentation\/tuikit\/buildinteractivemenu","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","role":"article","kind":"article","title":"Building Your First App","abstract":[{"text":"Create a simple counter application to learn TUIKit basics.","type":"text"}],"url":"\/documentation\/tuikit\/buildyourfirstapp"},"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","url":"\/documentation\/tuikit\/theming","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","title":"Theming System"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"url":"\/documentation\/tuikit\/viewhierarchy","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","type":"topic","title":"Understanding the View Hierarchy"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"url":"\/documentation\/tuikit\/architecture","kind":"article","abstract":[{"type":"text","text":"Understand the architecture and design patterns that power TUIKit."}],"type":"topic","title":"Architecture Overview","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"role":"article","title":"Building a Themable UI","abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","kind":"article","type":"topic","url":"\/documentation\/tuikit\/buildthemableui"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/appearance.json b/docs/data/documentation/tuikit/appearance.json index ab3112f..1ca420e 100644 --- a/docs/data/documentation/tuikit/appearance.json +++ b/docs/data/documentation/tuikit/appearance.json @@ -1 +1 @@ -{"kind":"article","sections":[],"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"metadata":{"role":"article","roleHeading":"Article","title":"Appearance System"},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","interfaceLanguage":"swift"},"schemaVersion":{"patch":0,"major":0,"minor":3},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"primaryContentSections":[{"content":[{"level":2,"anchor":"Overview","type":"heading","text":"Overview"},{"type":"paragraph","inlineContent":[{"type":"text","text":"TUIKit provides 5 appearance styles that control how borders and containers are rendered:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Line","type":"text"}]},{"type":"text","text":": Simple ASCII lines"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Rounded"}],"type":"strong"},{"type":"text","text":": Rounded corners (default)"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"DoubleLine"}],"type":"strong"},{"type":"text","text":": Double-line borders"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Heavy"}]},{"type":"text","text":": Heavy\/bold borders"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Block"}]},{"type":"text","text":": Half-block Unicode characters for solid appearance"}],"type":"paragraph"}]}]},{"level":2,"anchor":"Appearance-Styles","type":"heading","text":"Appearance Styles"},{"level":3,"anchor":"Line-Appearance","type":"heading","text":"Line Appearance"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Simple single-line ASCII borders:"}]},{"code":["VStack {"," Text(\"Content\")","}",".border(.line)"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Characters used:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Horizontal: "},{"type":"codeVoice","code":"-"}]}]},{"content":[{"inlineContent":[{"text":"Vertical: ","type":"text"},{"code":"|","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Corners: ","type":"text"},{"code":"+","type":"codeVoice"}]}]}]},{"level":3,"anchor":"Rounded-Appearance","type":"heading","text":"Rounded Appearance"},{"type":"paragraph","inlineContent":[{"text":"Rounded corners (default appearance):","type":"text"}]},{"code":["VStack {"," Text(\"Content\")","}",".border(.rounded)"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Characters used:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Top-left: ","type":"text"},{"type":"codeVoice","code":"╭"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Top-right: "},{"type":"codeVoice","code":"╮"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Bottom-left: "},{"code":"╰","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Bottom-right: "},{"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,"anchor":"DoubleLine-Appearance","type":"heading","text":"DoubleLine Appearance"},{"type":"paragraph","inlineContent":[{"text":"Double-line borders for emphasis:","type":"text"}]},{"code":["VStack {"," Text(\"Content\")","}",".border(.doubleLine)"],"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":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Top-right: "},{"type":"codeVoice","code":"╗"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Bottom-left: "},{"type":"codeVoice","code":"╚"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Bottom-right: ","type":"text"},{"code":"╝","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Horizontal: "},{"type":"codeVoice","code":"═"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Vertical: "},{"code":"║","type":"codeVoice"}],"type":"paragraph"}]}]},{"level":3,"anchor":"Heavy-Appearance","type":"heading","text":"Heavy Appearance"},{"type":"paragraph","inlineContent":[{"text":"Bold\/heavy borders:","type":"text"}]},{"code":["VStack {"," Text(\"Content\")","}",".border(.heavy)"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Characters used:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Top-left: "},{"code":"┏","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Top-right: "},{"type":"codeVoice","code":"┓"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Bottom-left: "},{"type":"codeVoice","code":"┗"}]}]},{"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":[{"type":"text","text":"Vertical: "},{"type":"codeVoice","code":"┃"}]}]}]},{"level":3,"anchor":"Block-Appearance","type":"heading","text":"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":[{"text":"Special rendering:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Top border","type":"text"}],"type":"strong"},{"text":": ","type":"text"},{"type":"codeVoice","code":"▄"},{"text":" (lower half-block) with foreground = container background","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Side borders","type":"text"}],"type":"strong"},{"text":": ","type":"text"},{"code":"█","type":"codeVoice"},{"text":" (full block) with foreground = container background","type":"text"}],"type":"paragraph"}]},{"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"},{"type":"text","text":": Filled with container background color"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Uses full-block characters to create solid visual edges"}]}]}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"The block appearance creates a seamless, filled container that appears integrated with the terminal background."}]},{"level":2,"anchor":"Setting-Global-Appearance","type":"heading","text":"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,"anchor":"Cycling-Appearances","type":"heading","text":"Cycling Appearances"},{"type":"paragraph","inlineContent":[{"type":"text","text":"The example app supports appearance cycling with the "},{"code":"a","type":"codeVoice"},{"type":"text","text":" key:"}]},{"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,"anchor":"Using-Appearance-with-Containers","type":"heading","text":"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,"anchor":"BorderStyle","type":"heading","text":"BorderStyle"},{"type":"paragraph","inlineContent":[{"text":"Use the ","type":"text"},{"code":"BorderStyle","type":"codeVoice"},{"text":" type to customize individual borders:","type":"text"}]},{"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,"anchor":"Appearance-in-Components","type":"heading","text":"Appearance in Components"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Different components use appearance differently:"}]},{"level":3,"anchor":"Text-with-Border","type":"heading","text":"Text with Border"},{"code":["Text(\"Bordered text\")"," .border(.block)"],"type":"codeListing","syntax":"swift"},{"level":3,"anchor":"Card-with-Appearance","type":"heading","text":"Card with Appearance"},{"code":["Card {"," Text(\"Content\")","}",".border(.rounded)"],"type":"codeListing","syntax":"swift"},{"level":3,"anchor":"Panel-with-Title","type":"heading","text":"Panel with Title"},{"code":["Panel(title: \"Title\") {"," Text(\"Content\")","}",".border(.block)"],"type":"codeListing","syntax":"swift"},{"level":3,"anchor":"Alerts-and-Dialogs","type":"heading","text":"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,"anchor":"Best-Practices","type":"heading","text":"Best Practices"},{"type":"orderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Consistency"}],"type":"strong"},{"text":": Choose one appearance and stick with it","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Theme integration","type":"text"}]},{"type":"text","text":": Use theme colors for borders"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Readability"}]},{"type":"text","text":": Ensure sufficient contrast for borders"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Performance","type":"text"}]},{"type":"text","text":": Complex borders render efficiently"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Testing"}]},{"type":"text","text":": Test appearance on various terminal sizes"}],"type":"paragraph"}]}]},{"level":2,"anchor":"Related-Topics","type":"heading","text":"Related Topics"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"code":"Appearance","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"BorderStyle","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/border(_:style:)-4xzvw"}]}]},{"content":[{"inlineContent":[{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Panel"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Card"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"ContainerView"}],"type":"paragraph"}]}]}],"kind":"content"}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","title":"Theming System","abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}]}}} \ No newline at end of file +{"schemaVersion":{"minor":3,"major":0,"patch":0},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","interfaceLanguage":"swift"},"kind":"article","metadata":{"title":"Appearance System","roleHeading":"Article","role":"article"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"sections":[],"primaryContentSections":[{"kind":"content","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"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Line"}]},{"type":"text","text":": Simple ASCII lines"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Rounded","type":"text"}]},{"type":"text","text":": Rounded corners (default)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"DoubleLine","type":"text"}],"type":"strong"},{"type":"text","text":": Double-line borders"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Heavy","type":"text"}],"type":"strong"},{"text":": Heavy\/bold borders","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Block"}],"type":"strong"},{"type":"text","text":": Half-block Unicode characters for solid appearance"}],"type":"paragraph"}]}]},{"level":2,"type":"heading","anchor":"Appearance-Styles","text":"Appearance Styles"},{"level":3,"type":"heading","anchor":"Line-Appearance","text":"Line Appearance"},{"inlineContent":[{"text":"Simple single-line ASCII borders:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["VStack {"," Text(\"Content\")","}",".border(.line)"]},{"inlineContent":[{"type":"text","text":"Characters used:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Horizontal: ","type":"text"},{"type":"codeVoice","code":"-"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Vertical: "},{"type":"codeVoice","code":"|"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Corners: ","type":"text"},{"type":"codeVoice","code":"+"}]}]}]},{"level":3,"type":"heading","anchor":"Rounded-Appearance","text":"Rounded Appearance"},{"inlineContent":[{"type":"text","text":"Rounded corners (default appearance):"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["VStack {"," Text(\"Content\")","}",".border(.rounded)"]},{"inlineContent":[{"type":"text","text":"Characters used:"}],"type":"paragraph"},{"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":[{"inlineContent":[{"type":"text","text":"Bottom-left: "},{"type":"codeVoice","code":"╰"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Bottom-right: "},{"type":"codeVoice","code":"╯"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Horizontal: ","type":"text"},{"type":"codeVoice","code":"─"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Vertical: ","type":"text"},{"code":"│","type":"codeVoice"}]}]}]},{"anchor":"DoubleLine-Appearance","type":"heading","text":"DoubleLine Appearance","level":3},{"inlineContent":[{"text":"Double-line borders for emphasis:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["VStack {"," Text(\"Content\")","}",".border(.doubleLine)"]},{"inlineContent":[{"text":"Characters used:","type":"text"}],"type":"paragraph"},{"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":[{"inlineContent":[{"text":"Bottom-left: ","type":"text"},{"code":"╚","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Bottom-right: ","type":"text"},{"type":"codeVoice","code":"╝"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Horizontal: "},{"type":"codeVoice","code":"═"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Vertical: ","type":"text"},{"code":"║","type":"codeVoice"}]}]}]},{"anchor":"Heavy-Appearance","type":"heading","text":"Heavy Appearance","level":3},{"inlineContent":[{"type":"text","text":"Bold\/heavy borders:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["VStack {"," Text(\"Content\")","}",".border(.heavy)"]},{"inlineContent":[{"text":"Characters used:","type":"text"}],"type":"paragraph"},{"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":[{"type":"text","text":"Bottom-left: "},{"type":"codeVoice","code":"┗"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Bottom-right: ","type":"text"},{"code":"┛","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Horizontal: ","type":"text"},{"code":"━","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Vertical: "},{"type":"codeVoice","code":"┃"}]}]}]},{"anchor":"Block-Appearance","type":"heading","text":"Block Appearance","level":3},{"inlineContent":[{"text":"Modern half-block Unicode characters for a solid, integrated look:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["VStack {"," Text(\"Content\")","}",".border(.block)"]},{"inlineContent":[{"text":"Special rendering:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Top border","type":"text"}],"type":"strong"},{"text":": ","type":"text"},{"type":"codeVoice","code":"▄"},{"text":" (lower half-block) with foreground = container background","type":"text"}],"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":[{"type":"strong","inlineContent":[{"text":"Bottom border","type":"text"}]},{"type":"text","text":": "},{"code":"▀","type":"codeVoice"},{"type":"text","text":" (upper half-block) with foreground = container background"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Content","type":"text"}],"type":"strong"},{"text":": Filled with container background color","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Uses full-block characters to create solid visual edges","type":"text"}]}]}]},{"inlineContent":[{"type":"text","text":"The block appearance creates a seamless, filled container that appears integrated with the terminal background."}],"type":"paragraph"},{"anchor":"Setting-Global-Appearance","type":"heading","text":"Setting Global Appearance","level":2},{"inlineContent":[{"text":"Use the appearance environment to set the default for all components:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," .environment(\\.appearance, .block)"," }"," }","}"]},{"anchor":"Cycling-Appearances","type":"heading","text":"Cycling Appearances","level":2},{"inlineContent":[{"text":"The example app supports appearance cycling with the ","type":"text"},{"type":"codeVoice","code":"a"},{"text":" key:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","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()"," }"," )"," }"," }"," }","}"]},{"anchor":"Using-Appearance-with-Containers","type":"heading","text":"Using Appearance with Containers","level":2},{"inlineContent":[{"type":"text","text":"All container views respect the appearance setting:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","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)","}"]},{"anchor":"BorderStyle","type":"heading","text":"BorderStyle","level":2},{"inlineContent":[{"text":"Use the ","type":"text"},{"type":"codeVoice","code":"BorderStyle"},{"text":" type to customize individual borders:","type":"text"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","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)"]},{"anchor":"Appearance-in-Components","type":"heading","text":"Appearance in Components","level":2},{"inlineContent":[{"type":"text","text":"Different components use appearance differently:"}],"type":"paragraph"},{"anchor":"Text-with-Border","type":"heading","text":"Text with Border","level":3},{"syntax":"swift","type":"codeListing","code":["Text(\"Bordered text\")"," .border(.block)"]},{"anchor":"Card-with-Appearance","type":"heading","text":"Card with Appearance","level":3},{"syntax":"swift","type":"codeListing","code":["Card {"," Text(\"Content\")","}",".border(.rounded)"]},{"anchor":"Panel-with-Title","type":"heading","text":"Panel with Title","level":3},{"syntax":"swift","type":"codeListing","code":["Panel(title: \"Title\") {"," Text(\"Content\")","}",".border(.block)"]},{"anchor":"Alerts-and-Dialogs","type":"heading","text":"Alerts and Dialogs","level":3},{"inlineContent":[{"type":"text","text":"Alerts automatically use the current appearance:"}],"type":"paragraph"},{"syntax":"swift","type":"codeListing","code":["Alert("," title: \"Confirm\","," message: \"Are you sure?\","," borderColor: .theme.border,"," titleColor: .theme.accent",")"]},{"anchor":"Best-Practices","type":"heading","text":"Best Practices","level":2},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Consistency","type":"text"}]},{"text":": Choose one appearance and stick with it","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Theme integration"}]},{"type":"text","text":": Use theme colors for borders"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Readability","type":"text"}]},{"type":"text","text":": Ensure sufficient contrast for borders"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Performance"}]},{"text":": Complex borders render efficiently","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Testing"}],"type":"strong"},{"type":"text","text":": Test appearance on various terminal sizes"}],"type":"paragraph"}]}]},{"anchor":"Related-Topics","type":"heading","text":"Related Topics","level":2},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Appearance"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"BorderStyle"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/border(_:style:)-4xzvw"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Panel","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Card","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"ContainerView"}]}]}]}]}],"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","url":"\/documentation\/tuikit\/theming","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","title":"Theming System"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/architecture.json b/docs/data/documentation/tuikit/architecture.json index a932d06..deac201 100644 --- a/docs/data/documentation/tuikit/architecture.json +++ b/docs/data/documentation/tuikit/architecture.json @@ -1 +1 @@ -{"primaryContentSections":[{"content":[{"text":"Core Design Principles","level":2,"type":"heading","anchor":"Core-Design-Principles"},{"inlineContent":[{"type":"text","text":"TUIKit follows these key principles:"}],"type":"paragraph"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Declarative UI"}]},{"type":"text","text":": Describe what you want, not how to build it"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Composability"}],"type":"strong"},{"text":": Build complex UIs from simple, reusable components","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Value Semantics","type":"text"}]},{"text":": Views are lightweight value types, not stateful objects","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Data Flow","type":"text"}],"type":"strong"},{"text":": Clear, unidirectional data flow through Environment and State","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Pure Swift","type":"text"}],"type":"strong"},{"type":"text","text":": No external dependencies or C bindings"}]}]}]},{"level":2,"text":"The View System","type":"heading","anchor":"The-View-System"},{"level":3,"text":"View Protocol","type":"heading","anchor":"View-Protocol"},{"inlineContent":[{"type":"text","text":"The "},{"type":"codeVoice","code":"View"},{"type":"text","text":" protocol is the foundation of TUIKit:"}],"type":"paragraph"},{"code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"],"type":"codeListing","syntax":"swift"},{"inlineContent":[{"text":"Views are ","type":"text"},{"inlineContent":[{"type":"text","text":"not"}],"type":"strong"},{"text":" UI elements—they’re descriptions of UI that get rendered when needed. This enables:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Lightweight composition","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Efficient updates"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Declarative syntax","type":"text"}]}]}]},{"level":3,"text":"Primitive vs Composite Views","type":"heading","anchor":"Primitive-vs-Composite-Views"},{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Primitive Views"}]},{"type":"text","text":" directly render content:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Conform to ","type":"text"},{"code":"Renderable","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Have "},{"code":"body: Never","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Examples: "},{"code":"Text","type":"codeVoice"},{"type":"text","text":", "},{"code":"Button","type":"codeVoice"},{"type":"text","text":", "},{"code":"Menu","type":"codeVoice"}]}]}]},{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Composite Views","type":"text"}]},{"type":"text","text":" combine other views:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Define a ","type":"text"},{"type":"codeVoice","code":"body"},{"text":" property","type":"text"}],"type":"paragraph"}]},{"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"}]}]},{"level":3,"text":"Rendering Pipeline","type":"heading","anchor":"Rendering-Pipeline"},{"type":"orderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"View Tree"}]},{"type":"text","text":": User creates view hierarchy"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Traversal","type":"text"}]},{"text":": Renderer walks tree depth-first","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Rendering"}]},{"type":"text","text":": Primitive views produce "},{"type":"codeVoice","code":"FrameBuffer"},{"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":[{"type":"strong","inlineContent":[{"text":"Output","type":"text"}]},{"type":"text","text":": Terminal renders the final buffer"}],"type":"paragraph"}]}]},{"level":2,"text":"State Management Architecture","type":"heading","anchor":"State-Management-Architecture"},{"level":3,"text":"Local State (@State)","type":"heading","anchor":"Local-State-State"},{"inlineContent":[{"type":"text","text":"Stored in the view itself:"}],"type":"paragraph"},{"code":["@State var count: Int = 0"],"type":"codeListing","syntax":"swift"},{"inlineContent":[{"type":"text","text":"When "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" changes, the view re-renders automatically."}],"type":"paragraph"},{"level":3,"text":"Environment (Top-Down)","type":"heading","anchor":"Environment-Top-Down"},{"inlineContent":[{"type":"text","text":"Parent views pass data to children:"}],"type":"paragraph"},{"code":["@Environment(\\.theme) var theme","","\/\/ Theme flows from App → all children"],"type":"codeListing","syntax":"swift"},{"level":3,"text":"Preferences (Bottom-Up)","type":"heading","anchor":"Preferences-Bottom-Up"},{"inlineContent":[{"type":"text","text":"Children can propagate values to parents (rarely used in TUIKit)."}],"type":"paragraph"},{"level":3,"text":"Storage (@AppStorage, @SceneStorage)","type":"heading","anchor":"Storage-AppStorage-SceneStorage"},{"inlineContent":[{"type":"text","text":"Persistent storage via:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"@AppStorage"}]},{"type":"text","text":": UserDefaults (macOS) or JSON file (Linux)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"@SceneStorage"}]},{"type":"text","text":": Per-scene state restoration"}]}]}]},{"level":2,"text":"Data Flow Pattern","type":"heading","anchor":"Data-Flow-Pattern"},{"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 │","└─────────────────────────────────────┘"],"type":"codeListing","syntax":null},{"anchor":"Theme-and-Appearance-System","type":"heading","level":2,"text":"Theme and Appearance System"},{"anchor":"Theme-Protocol","type":"heading","level":3,"text":"Theme Protocol"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Defines semantic colors:"}]},{"code":["public protocol Theme {"," var background: Color { get }"," var accent: Color { get }"," \/\/ ... other colors","}"],"type":"codeListing","syntax":"swift"},{"anchor":"Appearance-Protocol","type":"heading","level":3,"text":"Appearance Protocol"},{"type":"paragraph","inlineContent":[{"text":"Defines structural styles:","type":"text"}]},{"code":["public enum Appearance {"," case line, rounded, doubleLine, heavy, block","}"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Both are passed through Environment, enabling:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Global theme switching"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Dynamic appearance changes"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Consistent styling across app"}],"type":"paragraph"}]}]},{"anchor":"Focus-Management-System","type":"heading","level":2,"text":"Focus Management System"},{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"FocusManager"},{"type":"text","text":" tracks which element has keyboard focus:"}]},{"type":"orderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Focus ID","type":"text"}],"type":"strong"},{"type":"text","text":": Each interactive element has a unique ID"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Navigation","type":"text"}]},{"type":"text","text":": Tab\/Shift+Tab moves focus"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Rendering","type":"text"}]},{"text":": Focused element shows visual indicator","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Events"}]},{"type":"text","text":": Keyboard events route to focused element"}]}]}]},{"code":["@Environment(\\.focusManager) var focusManager","","\/\/ Navigation automatically updates focusManager","\/\/ onKeyPress receives keyboard events"],"type":"codeListing","syntax":"swift"},{"anchor":"Modifier-System","type":"heading","level":2,"text":"Modifier System"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Modifiers wrap views to add behavior:"}]},{"code":["extension View {"," func padding(_ amount: Int) -> some View {"," ModifiedView(content: self, modifier: PaddingModifier(amount))"," }","}"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Modifiers compose:"}]},{"code":["Text(\"Hello\")"," .bold() \/\/ Text → BoldView"," .padding(1) \/\/ BoldView → PaddedView"," .border(.rounded) \/\/ PaddedView → BorderedView"],"type":"codeListing","syntax":"swift"},{"anchor":"Component-Library","type":"heading","level":2,"text":"Component Library"},{"anchor":"Container-Views","type":"heading","level":3,"text":"Container Views"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"VStack"},{"text":", ","type":"text"},{"type":"codeVoice","code":"HStack"},{"text":", ","type":"text"},{"type":"codeVoice","code":"ZStack"},{"text":": Layout primitives","type":"text"}]}]},{"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":[{"inlineContent":[{"type":"codeVoice","code":"ContainerView"},{"text":": Header\/body\/footer structure","type":"text"}],"type":"paragraph"}]}]},{"anchor":"Interactive-Views","type":"heading","level":3,"text":"Interactive Views"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"Button","type":"codeVoice"},{"text":": Clickable button with focus","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Menu"},{"type":"text","text":": Selection menu with keyboard"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Alert"},{"type":"text","text":", "},{"type":"codeVoice","code":"Dialog"},{"type":"text","text":": Modal overlays"}]}]}]},{"anchor":"Structural-Views","type":"heading","level":3,"text":"Structural Views"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"code":"ForEach","type":"codeVoice"},{"text":": Render collections","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Text"},{"text":": Display text","type":"text"}]}]},{"content":[{"inlineContent":[{"code":"Spacer","type":"codeVoice"},{"text":", ","type":"text"},{"code":"Divider","type":"codeVoice"},{"text":": Layout helpers","type":"text"}],"type":"paragraph"}]}]},{"anchor":"Status-Bar","type":"heading","level":3,"text":"Status Bar"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"StatusBar","type":"codeVoice"},{"type":"text","text":": Application status bar"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"StatusBarItem","type":"codeVoice"},{"type":"text","text":": Individual item"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Shortcut"},{"type":"text","text":": Keyboard shortcut display"}],"type":"paragraph"}]}]},{"anchor":"Rendering-Engine","type":"heading","level":2,"text":"Rendering Engine"},{"anchor":"FrameBuffer","type":"heading","level":3,"text":"FrameBuffer"},{"type":"paragraph","inlineContent":[{"text":"Character-level buffer for compositing:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"2D array of characters and attributes"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Supports color, styling (bold, italic, etc.)"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Compositing for overlays"}],"type":"paragraph"}]}]},{"anchor":"ANSI-Renderer","type":"heading","level":3,"text":"ANSI Renderer"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Converts buffer to ANSI escape codes:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Color codes (foreground\/background)","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Styling (bold, italic, underline)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Terminal state management","type":"text"}]}]}]},{"anchor":"Terminal-Abstraction","type":"heading","level":3,"text":"Terminal Abstraction"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Platform-specific terminal handling:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"macOS: termios","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Linux: termios via libc"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Raw mode, alternate screen, signal handling"}]}]}]},{"anchor":"Performance-Considerations","type":"heading","level":2,"text":"Performance Considerations"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Lazy Rendering","type":"text"}],"type":"strong"},{"type":"text","text":": Only visible areas render"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Diff Optimization","type":"text"}]},{"type":"text","text":": Only changed areas redraw"}],"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"}]}]},{"anchor":"Error-Handling","type":"heading","level":2,"text":"Error Handling"},{"type":"paragraph","inlineContent":[{"text":"TUIKit uses Swift’s error handling:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Fatal errors for programmer mistakes"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Non-fatal errors for recovery scenarios"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Storage backend errors are silenced (fallback to defaults)"}],"type":"paragraph"}]}]},{"anchor":"Platform-Support","type":"heading","level":2,"text":"Platform Support"},{"anchor":"macOS","type":"heading","level":3,"text":"macOS"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Native UserDefaults for @AppStorage"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Full terminal support"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Modern Swift runtime"}]}]}]},{"anchor":"Linux","type":"heading","level":3,"text":"Linux"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"JSON file storage for @AppStorage"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"glibc-based terminal support","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"XDG paths for configuration","type":"text"}]}]}]},{"anchor":"Future-Extensibility","type":"heading","level":2,"text":"Future Extensibility"},{"type":"paragraph","inlineContent":[{"type":"text","text":"The architecture supports:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Custom storage backends","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Custom themes"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Custom appearances"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Custom view components","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Animation system (planned)"}]}]}]},{"anchor":"Related-Topics","type":"heading","level":2,"text":"Related Topics"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"code":"View","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Theme"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Appearance","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"code":"FocusManager","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"FrameBuffer"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"doc:Rendering","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true}],"type":"paragraph"}]}]}],"kind":"content"}],"schemaVersion":{"patch":0,"major":0,"minor":3},"abstract":[{"text":"Understand the architecture and design patterns that power TUIKit.","type":"text"}],"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"title":"Architecture Overview","roleHeading":"Article","role":"article"},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","interfaceLanguage":"swift"},"kind":"article","references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"}}} \ No newline at end of file +{"schemaVersion":{"major":0,"minor":3,"patch":0},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture"},"sections":[],"metadata":{"title":"Architecture Overview","roleHeading":"Article","role":"article"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"text":"Understand the architecture and design patterns that power TUIKit.","type":"text"}],"primaryContentSections":[{"content":[{"type":"heading","level":2,"text":"Core Design Principles","anchor":"Core-Design-Principles"},{"inlineContent":[{"type":"text","text":"TUIKit follows these key principles:"}],"type":"paragraph"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Declarative UI"}]},{"type":"text","text":": Describe what you want, not how to build it"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Composability","type":"text"}]},{"type":"text","text":": Build complex UIs from simple, reusable components"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Value Semantics","type":"text"}],"type":"strong"},{"text":": Views are lightweight value types, not stateful objects","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Data Flow"}],"type":"strong"},{"type":"text","text":": Clear, unidirectional data flow through Environment and State"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Pure Swift","type":"text"}]},{"text":": No external dependencies or C bindings","type":"text"}]}]}]},{"type":"heading","level":2,"text":"The View System","anchor":"The-View-System"},{"type":"heading","level":3,"text":"View Protocol","anchor":"View-Protocol"},{"inlineContent":[{"type":"text","text":"The "},{"code":"View","type":"codeVoice"},{"type":"text","text":" protocol is the foundation of TUIKit:"}],"type":"paragraph"},{"type":"codeListing","code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"],"syntax":"swift"},{"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":[{"type":"text","text":"Efficient updates"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Declarative syntax","type":"text"}],"type":"paragraph"}]}]},{"type":"heading","level":3,"text":"Primitive vs Composite Views","anchor":"Primitive-vs-Composite-Views"},{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Primitive Views","type":"text"}]},{"type":"text","text":" directly render content:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Conform to "},{"code":"Renderable","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Have "},{"code":"body: Never","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Examples: "},{"code":"Text","type":"codeVoice"},{"type":"text","text":", "},{"code":"Button","type":"codeVoice"},{"type":"text","text":", "},{"code":"Menu","type":"codeVoice"}],"type":"paragraph"}]}]},{"inlineContent":[{"inlineContent":[{"text":"Composite Views","type":"text"}],"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":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Renderer walks the tree recursively"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Examples: "},{"type":"codeVoice","code":"VStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"HStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"Card"}]}]}]},{"type":"heading","level":3,"text":"Rendering Pipeline","anchor":"Rendering-Pipeline"},{"type":"orderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"View Tree","type":"text"}]},{"type":"text","text":": User creates view hierarchy"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Traversal"}],"type":"strong"},{"text":": Renderer walks tree depth-first","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Rendering"}],"type":"strong"},{"type":"text","text":": Primitive views produce "},{"code":"FrameBuffer","type":"codeVoice"},{"type":"text","text":" character data"}],"type":"paragraph"}]},{"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":[{"type":"text","text":"Output"}]},{"type":"text","text":": Terminal renders the final buffer"}]}]}]},{"type":"heading","level":2,"text":"State Management Architecture","anchor":"State-Management-Architecture"},{"type":"heading","level":3,"text":"Local State (@State)","anchor":"Local-State-State"},{"inlineContent":[{"type":"text","text":"Stored in the view itself:"}],"type":"paragraph"},{"type":"codeListing","code":["@State var count: Int = 0"],"syntax":"swift"},{"inlineContent":[{"type":"text","text":"When "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" changes, the view re-renders automatically."}],"type":"paragraph"},{"type":"heading","level":3,"text":"Environment (Top-Down)","anchor":"Environment-Top-Down"},{"inlineContent":[{"text":"Parent views pass data to children:","type":"text"}],"type":"paragraph"},{"type":"codeListing","code":["@Environment(\\.theme) var theme","","\/\/ Theme flows from App → all children"],"syntax":"swift"},{"type":"heading","level":3,"text":"Preferences (Bottom-Up)","anchor":"Preferences-Bottom-Up"},{"inlineContent":[{"type":"text","text":"Children can propagate values to parents (rarely used in TUIKit)."}],"type":"paragraph"},{"type":"heading","level":3,"text":"Storage (@AppStorage, @SceneStorage)","anchor":"Storage-AppStorage-SceneStorage"},{"inlineContent":[{"text":"Persistent storage via:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"@AppStorage","type":"text"}],"type":"strong"},{"text":": UserDefaults (macOS) or JSON file (Linux)","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"@SceneStorage"}]},{"type":"text","text":": Per-scene state restoration"}],"type":"paragraph"}]}]},{"type":"heading","level":2,"text":"Data Flow Pattern","anchor":"Data-Flow-Pattern"},{"type":"codeListing","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":"heading","level":2,"text":"Theme and Appearance System","anchor":"Theme-and-Appearance-System"},{"type":"heading","level":3,"text":"Theme Protocol","anchor":"Theme-Protocol"},{"inlineContent":[{"type":"text","text":"Defines semantic colors:"}],"type":"paragraph"},{"type":"codeListing","code":["public protocol Theme {"," var background: Color { get }"," var accent: Color { get }"," \/\/ ... other colors","}"],"syntax":"swift"},{"type":"heading","level":3,"text":"Appearance Protocol","anchor":"Appearance-Protocol"},{"inlineContent":[{"type":"text","text":"Defines structural styles:"}],"type":"paragraph"},{"type":"codeListing","code":["public enum Appearance {"," case line, rounded, doubleLine, heavy, block","}"],"syntax":"swift"},{"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"}]}]}]},{"type":"heading","level":2,"text":"Focus Management System","anchor":"Focus-Management-System"},{"inlineContent":[{"type":"codeVoice","code":"FocusManager"},{"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":[{"type":"strong","inlineContent":[{"type":"text","text":"Navigation"}]},{"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":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Events","type":"text"}]},{"type":"text","text":": Keyboard events route to focused element"}],"type":"paragraph"}]}]},{"code":["@Environment(\\.focusManager) var focusManager","","\/\/ Navigation automatically updates focusManager","\/\/ onKeyPress receives keyboard events"],"type":"codeListing","syntax":"swift"},{"text":"Modifier System","anchor":"Modifier-System","type":"heading","level":2},{"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))"," }","}"],"type":"codeListing","syntax":"swift"},{"inlineContent":[{"text":"Modifiers compose:","type":"text"}],"type":"paragraph"},{"code":["Text(\"Hello\")"," .bold() \/\/ Text → BoldView"," .padding(1) \/\/ BoldView → PaddedView"," .border(.rounded) \/\/ PaddedView → BorderedView"],"type":"codeListing","syntax":"swift"},{"text":"Component Library","anchor":"Component-Library","type":"heading","level":2},{"text":"Container Views","anchor":"Container-Views","type":"heading","level":3},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"codeVoice","code":"VStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"HStack"},{"type":"text","text":", "},{"type":"codeVoice","code":"ZStack"},{"type":"text","text":": Layout primitives"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Card","type":"codeVoice"},{"text":", ","type":"text"},{"code":"Box","type":"codeVoice"},{"text":", ","type":"text"},{"code":"Panel","type":"codeVoice"},{"text":": Styled containers","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"ContainerView","type":"codeVoice"},{"text":": Header\/body\/footer structure","type":"text"}]}]}]},{"text":"Interactive Views","anchor":"Interactive-Views","type":"heading","level":3},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"Button","type":"codeVoice"},{"text":": Clickable button with focus","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Menu"},{"text":": Selection menu with keyboard","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"Alert","type":"codeVoice"},{"text":", ","type":"text"},{"code":"Dialog","type":"codeVoice"},{"text":": Modal overlays","type":"text"}],"type":"paragraph"}]}]},{"text":"Structural Views","anchor":"Structural-Views","type":"heading","level":3},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"ForEach","type":"codeVoice"},{"type":"text","text":": Render collections"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Text","type":"codeVoice"},{"text":": Display text","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Spacer"},{"type":"text","text":", "},{"type":"codeVoice","code":"Divider"},{"type":"text","text":": Layout helpers"}]}]}]},{"text":"Status Bar","anchor":"Status-Bar","type":"heading","level":3},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"codeVoice","code":"StatusBar"},{"type":"text","text":": Application status bar"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"StatusBarItem","type":"codeVoice"},{"text":": Individual item","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Shortcut","type":"codeVoice"},{"type":"text","text":": Keyboard shortcut display"}]}]}]},{"text":"Rendering Engine","anchor":"Rendering-Engine","type":"heading","level":2},{"text":"FrameBuffer","anchor":"FrameBuffer","type":"heading","level":3},{"inlineContent":[{"text":"Character-level buffer for compositing:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"2D array of characters and attributes"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Supports color, styling (bold, italic, etc.)","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Compositing for overlays","type":"text"}]}]}]},{"text":"ANSI Renderer","anchor":"ANSI-Renderer","type":"heading","level":3},{"inlineContent":[{"type":"text","text":"Converts buffer to ANSI escape codes:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Color codes (foreground\/background)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Styling (bold, italic, underline)","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Terminal state management","type":"text"}]}]}]},{"text":"Terminal Abstraction","anchor":"Terminal-Abstraction","type":"heading","level":3},{"inlineContent":[{"text":"Platform-specific terminal handling:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"macOS: termios","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Linux: termios via libc"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Raw mode, alternate screen, signal handling","type":"text"}]}]}]},{"text":"Performance Considerations","anchor":"Performance-Considerations","type":"heading","level":2},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Lazy Rendering","type":"text"}],"type":"strong"},{"type":"text","text":": Only visible areas render"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Diff Optimization","type":"text"}]},{"type":"text","text":": Only changed areas redraw"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Buffer Reuse"}]},{"type":"text","text":": FrameBuffer recycled across frames"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"View Value Semantics"}],"type":"strong"},{"text":": Lightweight copying and discarding","type":"text"}],"type":"paragraph"}]}]},{"text":"Error Handling","anchor":"Error-Handling","type":"heading","level":2},{"inlineContent":[{"text":"TUIKit uses Swift’s error handling:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Fatal errors for programmer mistakes"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Non-fatal errors for recovery scenarios","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Storage backend errors are silenced (fallback to defaults)","type":"text"}],"type":"paragraph"}]}]},{"text":"Platform Support","anchor":"Platform-Support","type":"heading","level":2},{"text":"macOS","anchor":"macOS","type":"heading","level":3},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Native UserDefaults for @AppStorage"}]}]},{"content":[{"inlineContent":[{"text":"Full terminal support","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Modern Swift runtime","type":"text"}],"type":"paragraph"}]}]},{"text":"Linux","anchor":"Linux","type":"heading","level":3},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"JSON file storage for @AppStorage","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"glibc-based terminal support"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"XDG paths for configuration"}],"type":"paragraph"}]}]},{"text":"Future Extensibility","anchor":"Future-Extensibility","type":"heading","level":2},{"inlineContent":[{"text":"The architecture supports:","type":"text"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Custom storage backends"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Custom themes"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Custom appearances"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Custom view components"}]}]},{"content":[{"inlineContent":[{"text":"Animation system (planned)","type":"text"}],"type":"paragraph"}]}]},{"text":"Related Topics","anchor":"Related-Topics","type":"heading","level":2},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"code":"View","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Theme"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"Appearance","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"FocusManager"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"FrameBuffer","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"doc:Rendering","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"}],"type":"paragraph"}]}]}],"kind":"content"}],"kind":"article","references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/buildinteractivemenu.json b/docs/data/documentation/tuikit/buildinteractivemenu.json index 33edcf0..987ba7d 100644 --- a/docs/data/documentation/tuikit/buildinteractivemenu.json +++ b/docs/data/documentation/tuikit/buildinteractivemenu.json @@ -1 +1 @@ -{"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","interfaceLanguage":"swift"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"schemaVersion":{"patch":0,"minor":3,"major":0},"kind":"article","abstract":[{"type":"text","text":"Create a navigation menu with keyboard shortcuts and status bar hints."}],"primaryContentSections":[{"kind":"content","content":[{"anchor":"Overview","type":"heading","level":2,"text":"Overview"},{"type":"paragraph","inlineContent":[{"type":"text","text":"In this tutorial, you’ll create a menu-driven application featuring:"}]},{"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":[{"type":"text","text":"Status bar with hints"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Page navigation patterns"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"Next-Steps","type":"heading","level":2,"text":"Next Steps"},{"type":"paragraph","inlineContent":[{"type":"text","text":"You’ve created an interactive menu-driven application!"}]},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Learn about "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus"},{"type":"text","text":" for advanced focus management"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Explore "},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference","isActive":true},{"type":"text","text":" for more complex state patterns"}]}]},{"content":[{"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"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Check out "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance"},{"type":"text","text":" for custom styling"}]}]}],"type":"unorderedList"}]}],"metadata":{"title":"Building an Interactive Menu","role":"article","roleHeading":"Article"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"role":"article","kind":"article","url":"\/documentation\/tuikit\/focus","title":"Focus Management","abstract":[{"text":"Understand how keyboard navigation and focus works in TUIKit.","type":"text"}],"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"url":"\/documentation\/tuikit\/buildthemableui","abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"kind":"article","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","role":"article","title":"Building a Themable UI"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"title":"Appearance System","type":"topic","kind":"article","url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article"}}} \ No newline at end of file +{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"primaryContentSections":[{"kind":"content","content":[{"anchor":"Overview","type":"heading","level":2,"text":"Overview"},{"inlineContent":[{"type":"text","text":"In this tutorial, you’ll create a menu-driven application featuring:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Menu"},{"type":"text","text":" component for selection"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Keyboard shortcut handling"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Status bar with hints"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Page navigation patterns","type":"text"}]}]}],"type":"unorderedList"},{"anchor":"Next-Steps","level":2,"type":"heading","text":"Next Steps"},{"type":"paragraph","inlineContent":[{"text":"You’ve created an interactive menu-driven application!","type":"text"}]},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Learn about ","type":"text"},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus"},{"text":" for advanced focus management","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Explore "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"},{"type":"text","text":" for more complex state patterns"}]}]},{"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"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","isActive":true,"type":"reference"},{"text":" for custom styling","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"}]}],"kind":"article","schemaVersion":{"minor":3,"patch":0,"major":0},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu"},"abstract":[{"text":"Create a navigation menu with keyboard shortcuts and status bar hints.","type":"text"}],"metadata":{"roleHeading":"Article","role":"article","title":"Building an Interactive Menu"},"sections":[],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","title":"Appearance System","url":"\/documentation\/tuikit\/appearance","kind":"article","abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildThemableUI":{"role":"article","title":"Building a Themable UI","abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","kind":"article","type":"topic","url":"\/documentation\/tuikit\/buildthemableui"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Focus":{"type":"topic","abstract":[{"type":"text","text":"Understand how keyboard navigation and focus works in TUIKit."}],"title":"Focus Management","role":"article","url":"\/documentation\/tuikit\/focus","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/buildthemableui.json b/docs/data/documentation/tuikit/buildthemableui.json index afea9bb..38b1353 100644 --- a/docs/data/documentation/tuikit/buildthemableui.json +++ b/docs/data/documentation/tuikit/buildthemableui.json @@ -1 +1 @@ -{"primaryContentSections":[{"content":[{"level":2,"text":"Overview","anchor":"Overview","type":"heading"},{"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":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Dynamic theme switching"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Persisted theme preference"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Visual theme selection UI","type":"text"}]}]}],"type":"unorderedList"},{"level":2,"text":"Next Steps","anchor":"Next-Steps","type":"heading"},{"inlineContent":[{"text":"Congratulations! You’ve built a fully themed, customizable application.","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Learn more about "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"type":"text","text":" for creating custom themes"}]}]},{"content":[{"inlineContent":[{"text":"Explore ","type":"text"},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","isActive":true},{"text":" for structural styles","type":"text"}],"type":"paragraph"}]},{"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 "},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","type":"reference","isActive":true},{"type":"text","text":" overview for deeper understanding"}]}]}],"type":"unorderedList"}],"kind":"content"}],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"role":"article","title":"Building a Themable UI","roleHeading":"Article"},"schemaVersion":{"major":0,"patch":0,"minor":3},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","interfaceLanguage":"swift"},"sections":[],"abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"kind":"article","references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","title":"Theming System","abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"title":"Appearance System","type":"topic","kind":"article","url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"abstract":[{"text":"Understand the architecture and design patterns that power TUIKit.","type":"text"}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","kind":"article","role":"article","url":"\/documentation\/tuikit\/architecture","title":"Architecture Overview","type":"topic"}}} \ No newline at end of file +{"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"role":"article","roleHeading":"Article","title":"Building a Themable UI"},"schemaVersion":{"minor":3,"major":0,"patch":0},"sections":[],"primaryContentSections":[{"kind":"content","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":[{"inlineContent":[{"text":"Theme environment integration","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Dynamic theme switching"}]}]},{"content":[{"inlineContent":[{"text":"Persisted theme preference","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Visual theme selection UI"}],"type":"paragraph"}]}],"type":"unorderedList"},{"text":"Next Steps","anchor":"Next-Steps","type":"heading","level":2},{"inlineContent":[{"type":"text","text":"Congratulations! You’ve built a fully themed, customizable application."}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"Learn more about "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"type":"text","text":" for creating custom themes"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Explore "},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","isActive":true,"type":"reference"},{"type":"text","text":" for structural styles"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"See ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true,"type":"reference"},{"text":" for advanced state patterns","type":"text"}]}]},{"content":[{"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":"paragraph"}]}],"type":"unorderedList"}]}],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildThemableUI","interfaceLanguage":"swift"},"kind":"article","abstract":[{"type":"text","text":"Create an application with dynamic theme switching and persistence."}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","title":"Appearance System","url":"\/documentation\/tuikit\/appearance","kind":"article","abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"role":"article"},"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","url":"\/documentation\/tuikit\/theming","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","title":"Theming System"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Architecture":{"url":"\/documentation\/tuikit\/architecture","kind":"article","abstract":[{"type":"text","text":"Understand the architecture and design patterns that power TUIKit."}],"type":"topic","title":"Architecture Overview","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Architecture","role":"article"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/buildyourfirstapp.json b/docs/data/documentation/tuikit/buildyourfirstapp.json index 5e555d3..b852b66 100644 --- a/docs/data/documentation/tuikit/buildyourfirstapp.json +++ b/docs/data/documentation/tuikit/buildyourfirstapp.json @@ -1 +1 @@ -{"metadata":{"role":"article","title":"Building Your First App","roleHeading":"Article"},"abstract":[{"text":"Create a simple counter application to learn TUIKit basics.","type":"text"}],"schemaVersion":{"patch":0,"major":0,"minor":3},"sections":[],"kind":"article","hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","interfaceLanguage":"swift"},"primaryContentSections":[{"content":[{"level":2,"text":"Overview","anchor":"Overview","type":"heading"},{"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"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Creating an app with the ","type":"text"},{"code":"@main","type":"codeVoice"},{"text":" attribute","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Using ","type":"text"},{"code":"VStack","type":"codeVoice"},{"text":" and ","type":"text"},{"code":"HStack","type":"codeVoice"},{"text":" for layout","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Handling button taps with "},{"type":"codeVoice","code":"@State"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Running and testing your app","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"level":2,"text":"Next Steps","anchor":"Next-Steps","type":"heading"},{"inlineContent":[{"text":"Congratulations! You’ve built your first TUIKit app.","type":"text"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"text":"Learn more about ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"},{"text":" for complex state scenarios","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Explore "},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"type":"text","text":" to customize colors"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Try building an interactive ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Check out ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","isActive":true,"type":"reference"},{"text":" for more styling options","type":"text"}]}]}],"type":"unorderedList"}],"kind":"content"}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"role":"article","url":"\/documentation\/tuikit\/modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"title":"View Modifiers","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","type":"topic","url":"\/documentation\/tuikit\/buildinteractivemenu","title":"Building an Interactive Menu","role":"article","kind":"article","abstract":[{"type":"text","text":"Create a navigation menu with keyboard shortcuts and status bar hints."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","title":"Theming System","abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}]}}} \ No newline at end of file +{"metadata":{"role":"article","title":"Building Your First App","roleHeading":"Article"},"schemaVersion":{"minor":3,"patch":0,"major":0},"abstract":[{"type":"text","text":"Create a simple counter application to learn TUIKit basics."}],"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","interfaceLanguage":"swift"},"primaryContentSections":[{"kind":"content","content":[{"anchor":"Overview","level":2,"text":"Overview","type":"heading"},{"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"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Creating an app with the "},{"type":"codeVoice","code":"@main"},{"type":"text","text":" attribute"}]}]},{"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":[{"inlineContent":[{"text":"Handling button taps with ","type":"text"},{"type":"codeVoice","code":"@State"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Running and testing your app","type":"text"}]}]}],"type":"unorderedList"},{"anchor":"Next-Steps","level":2,"text":"Next Steps","type":"heading"},{"inlineContent":[{"type":"text","text":"Congratulations! You’ve built your first TUIKit app."}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Learn more about ","type":"text"},{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference"},{"text":" for complex state scenarios","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Explore ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"text":" to customize colors","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Try building an interactive "},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","type":"reference","isActive":true}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Check out "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","isActive":true},{"type":"text","text":" for more styling options"}],"type":"paragraph"}]}],"type":"unorderedList"}]}],"kind":"article","hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"topic","role":"article","kind":"article","title":"View Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"url":"\/documentation\/tuikit\/modifiers"},"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","url":"\/documentation\/tuikit\/theming","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","title":"Theming System"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildInteractiveMenu":{"title":"Building an Interactive Menu","type":"topic","abstract":[{"text":"Create a navigation menu with keyboard shortcuts and status bar hints.","type":"text"}],"url":"\/documentation\/tuikit\/buildinteractivemenu","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildInteractiveMenu","role":"article"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/focus.json b/docs/data/documentation/tuikit/focus.json index 5f31925..25a7c7b 100644 --- a/docs/data/documentation/tuikit/focus.json +++ b/docs/data/documentation/tuikit/focus.json @@ -1 +1 @@ -{"abstract":[{"type":"text","text":"Understand how keyboard navigation and focus works in TUIKit."}],"metadata":{"role":"article","title":"Focus Management","roleHeading":"Article"},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","interfaceLanguage":"swift"},"primaryContentSections":[{"content":[{"level":2,"type":"heading","text":"Overview","anchor":"Overview"},{"type":"paragraph","inlineContent":[{"type":"text","text":"TUIKit provides a sophisticated focus management system that enables Tab\/Shift+Tab navigation, keyboard shortcuts, and custom focus logic."}]},{"level":2,"type":"heading","text":"The Focus Manager","anchor":"The-Focus-Manager"},{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"FocusManager"},{"type":"text","text":" manages which component currently has keyboard focus:"}]},{"type":"codeListing","syntax":"swift","code":["@Environment(\\.focusManager) var focusManager","","Button(\"Click me\") {"," \/\/ Handle click","}",".focused(focusID: \"myButton\")"]},{"level":2,"type":"heading","text":"Tab Navigation","anchor":"Tab-Navigation"},{"type":"paragraph","inlineContent":[{"text":"By default, all focusable elements can be navigated with Tab and Shift+Tab:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Tab","type":"text"}],"type":"strong"},{"text":": Move focus to the next element","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Shift+Tab"}],"type":"strong"},{"type":"text","text":": Move focus to the previous element"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Enter\/Space","type":"text"}],"type":"strong"},{"type":"text","text":": Activate focused button"}],"type":"paragraph"}]}]},{"type":"codeListing","syntax":"swift","code":["VStack(spacing: 1) {"," Text(\"Navigation\")",""," Button(\"First\") { }"," Button(\"Second\") { }"," Button(\"Third\") { }","}"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Users can Tab between the buttons in order."}]},{"level":2,"type":"heading","text":"Focus Indicators","anchor":"Focus-Indicators"},{"type":"paragraph","inlineContent":[{"text":"Focusable elements show a focus indicator when active:","type":"text"}]},{"code":["Button(\"Focusable\") {"," print(\"Activated\")","}"],"syntax":"swift","type":"codeListing"},{"type":"paragraph","inlineContent":[{"text":"The button displays:","type":"text"}]},{"items":[{"content":[{"inlineContent":[{"type":"text","text":"A border around the element"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Visual highlight (usually arrow prefix: ","type":"text"},{"code":"▸","type":"codeVoice"},{"text":")","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Theme accent color","type":"text"}]}]}],"type":"unorderedList"},{"anchor":"Programmatic-Focus","level":2,"type":"heading","text":"Programmatic Focus"},{"type":"paragraph","inlineContent":[{"text":"Set focus programmatically:","type":"text"}]},{"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 }"," }"," }","}"],"syntax":"swift","type":"codeListing"},{"anchor":"Keyboard-Events","level":2,"type":"heading","text":"Keyboard Events"},{"type":"paragraph","inlineContent":[{"text":"Handle keyboard events with ","type":"text"},{"code":"onKeyPress","type":"codeVoice"},{"text":":","type":"text"}]},{"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"," }"," }"," }","}"],"syntax":"swift","type":"codeListing"},{"type":"heading","text":"Key Event Structure","level":3,"anchor":"Key-Event-Structure"},{"inlineContent":[{"type":"codeVoice","code":"KeyEvent"},{"type":"text","text":" contains:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"key"}]},{"type":"text","text":": The key pressed (character, arrow, enter, etc.)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"modifiers","type":"text"}],"type":"strong"},{"text":": Ctrl, Shift, Alt flags","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"raw"}]},{"text":": Raw terminal escape sequence","type":"text"}],"type":"paragraph"}]}]},{"type":"heading","text":"Special Keys","level":3,"anchor":"Special-Keys"},{"inlineContent":[{"type":"text","text":"Handle special keys like arrows and function keys:"}],"type":"paragraph"},{"type":"codeListing","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","}"],"syntax":"swift"},{"type":"heading","text":"Focusable Protocol","level":2,"anchor":"Focusable-Protocol"},{"inlineContent":[{"text":"Components conform to ","type":"text"},{"type":"codeVoice","code":"Focusable"},{"text":" to support focus:","type":"text"}],"type":"paragraph"},{"type":"codeListing","code":["public protocol Focusable {"," var focusID: String? { get }"," var isFocused: Bool { get }","}"],"syntax":"swift"},{"inlineContent":[{"type":"text","text":"Button, Menu, and other interactive components automatically implement this."}],"type":"paragraph"},{"type":"heading","text":"Custom Focus Logic","level":2,"anchor":"Custom-Focus-Logic"},{"inlineContent":[{"type":"text","text":"Create custom focus behavior:"}],"type":"paragraph"},{"type":"codeListing","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"," }"," }"," }","}"],"syntax":"swift"},{"type":"heading","text":"Focus in Modals","level":2,"anchor":"Focus-in-Modals"},{"inlineContent":[{"text":"Focus works correctly with modals and overlays:","type":"text"}],"type":"paragraph"},{"type":"codeListing","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 }"," }","}"],"syntax":"swift"},{"inlineContent":[{"text":"When a modal appears, focus automatically moves to the first focusable element in the modal.","type":"text"}],"type":"paragraph"},{"type":"heading","text":"Best Practices","level":2,"anchor":"Best-Practices"},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Tab order"}],"type":"strong"},{"type":"text","text":": Arrange elements logically for Tab navigation"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Feedback"}],"type":"strong"},{"text":": Always provide visual feedback for focused elements","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Shortcuts","type":"text"}],"type":"strong"},{"text":": Implement keyboard shortcuts for common actions","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Testing","type":"text"}],"type":"strong"},{"type":"text","text":": Test focus behavior with keyboard navigation"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Accessibility","type":"text"}]},{"text":": Consider users with motor impairments who rely on keyboard","type":"text"}]}]}]},{"type":"heading","text":"Status Bar Integration","level":2,"anchor":"Status-Bar-Integration"},{"inlineContent":[{"type":"text","text":"Status bar items show keyboard shortcuts:"}],"type":"paragraph"},{"type":"codeListing","code":[".statusBarItems {"," StatusBarItem("," label: \"Help\","," shortcut: Shortcut.letter(\"?\"),"," action: {"," print(\"Show help\")"," }"," )",""," StatusBarItem("," label: \"Quit\","," shortcut: Shortcut.letter(\"q\"),"," action: {"," print(\"Exit app\")"," }"," )","}"],"syntax":"swift"},{"type":"heading","text":"Related Topics","level":2,"anchor":"Related-Topics"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"FocusManager","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"KeyEvent"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Focusable"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/onKeyPress(_:)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"StatusBar","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"StatusBarItem"}]}]}]}],"kind":"content"}],"schemaVersion":{"major":0,"patch":0,"minor":3},"kind":"article","sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"}}} \ No newline at end of file +{"kind":"article","sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"type":"text","text":"Understand how keyboard navigation and focus works in TUIKit."}],"schemaVersion":{"major":0,"minor":3,"patch":0},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Focus","interfaceLanguage":"swift"},"metadata":{"title":"Focus Management","roleHeading":"Article","role":"article"},"primaryContentSections":[{"content":[{"anchor":"Overview","type":"heading","text":"Overview","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"TUIKit provides a sophisticated focus management system that enables Tab\/Shift+Tab navigation, keyboard shortcuts, and custom focus logic."}]},{"anchor":"The-Focus-Manager","type":"heading","text":"The Focus Manager","level":2},{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"FocusManager"},{"text":" manages which component currently has keyboard focus:","type":"text"}]},{"type":"codeListing","code":["@Environment(\\.focusManager) var focusManager","","Button(\"Click me\") {"," \/\/ Handle click","}",".focused(focusID: \"myButton\")"],"syntax":"swift"},{"anchor":"Tab-Navigation","type":"heading","text":"Tab Navigation","level":2},{"type":"paragraph","inlineContent":[{"text":"By default, all focusable elements can be navigated with Tab and Shift+Tab:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Tab","type":"text"}],"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":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Enter\/Space"}],"type":"strong"},{"type":"text","text":": Activate focused button"}]}]}]},{"type":"codeListing","code":["VStack(spacing: 1) {"," Text(\"Navigation\")",""," Button(\"First\") { }"," Button(\"Second\") { }"," Button(\"Third\") { }","}"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Users can Tab between the buttons in order.","type":"text"}]},{"anchor":"Focus-Indicators","type":"heading","text":"Focus Indicators","level":2},{"type":"paragraph","inlineContent":[{"text":"Focusable elements show a focus indicator when active:","type":"text"}]},{"type":"codeListing","syntax":"swift","code":["Button(\"Focusable\") {"," print(\"Activated\")","}"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"The button displays:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"A border around the element"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Visual highlight (usually arrow prefix: ","type":"text"},{"code":"▸","type":"codeVoice"},{"text":")","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Theme accent color","type":"text"}]}]}]},{"level":2,"type":"heading","anchor":"Programmatic-Focus","text":"Programmatic Focus"},{"type":"paragraph","inlineContent":[{"text":"Set focus programmatically:","type":"text"}]},{"type":"codeListing","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 }"," }"," }","}"]},{"level":2,"type":"heading","text":"Keyboard Events","anchor":"Keyboard-Events"},{"inlineContent":[{"text":"Handle keyboard events with ","type":"text"},{"code":"onKeyPress","type":"codeVoice"},{"text":":","type":"text"}],"type":"paragraph"},{"type":"codeListing","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"," }"," }"," }","}"]},{"level":3,"type":"heading","text":"Key Event Structure","anchor":"Key-Event-Structure"},{"inlineContent":[{"type":"codeVoice","code":"KeyEvent"},{"type":"text","text":" contains:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"key"}],"type":"strong"},{"type":"text","text":": The key pressed (character, arrow, enter, etc.)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"modifiers"}],"type":"strong"},{"text":": Ctrl, Shift, Alt flags","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"raw"}]},{"type":"text","text":": Raw terminal escape sequence"}]}]}],"type":"unorderedList"},{"level":3,"type":"heading","text":"Special Keys","anchor":"Special-Keys"},{"inlineContent":[{"type":"text","text":"Handle special keys like arrows and function keys:"}],"type":"paragraph"},{"type":"codeListing","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","}"]},{"level":2,"type":"heading","text":"Focusable Protocol","anchor":"Focusable-Protocol"},{"inlineContent":[{"text":"Components conform to ","type":"text"},{"type":"codeVoice","code":"Focusable"},{"text":" to support focus:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["public protocol Focusable {"," var focusID: String? { get }"," var isFocused: Bool { get }","}"]},{"inlineContent":[{"type":"text","text":"Button, Menu, and other interactive components automatically implement this."}],"type":"paragraph"},{"level":2,"type":"heading","text":"Custom Focus Logic","anchor":"Custom-Focus-Logic"},{"inlineContent":[{"type":"text","text":"Create custom focus behavior:"}],"type":"paragraph"},{"type":"codeListing","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"," }"," }"," }","}"]},{"level":2,"type":"heading","text":"Focus in Modals","anchor":"Focus-in-Modals"},{"inlineContent":[{"text":"Focus works correctly with modals and overlays:","type":"text"}],"type":"paragraph"},{"type":"codeListing","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 }"," }","}"]},{"inlineContent":[{"text":"When a modal appears, focus automatically moves to the first focusable element in the modal.","type":"text"}],"type":"paragraph"},{"level":2,"type":"heading","text":"Best Practices","anchor":"Best-Practices"},{"items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Tab order"}]},{"type":"text","text":": Arrange elements logically for Tab navigation"}],"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":[{"inlineContent":[{"text":"Shortcuts","type":"text"}],"type":"strong"},{"text":": Implement keyboard shortcuts for common actions","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Testing"}],"type":"strong"},{"text":": Test focus behavior with keyboard navigation","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Accessibility","type":"text"}],"type":"strong"},{"type":"text","text":": Consider users with motor impairments who rely on keyboard"}]}]}],"type":"orderedList"},{"level":2,"type":"heading","text":"Status Bar Integration","anchor":"Status-Bar-Integration"},{"inlineContent":[{"type":"text","text":"Status bar items show keyboard shortcuts:"}],"type":"paragraph"},{"type":"codeListing","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\")"," }"," )","}"]},{"level":2,"type":"heading","text":"Related Topics","anchor":"Related-Topics"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"FocusManager","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"KeyEvent","type":"codeVoice"}]}]},{"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"}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/gettingstarted.json b/docs/data/documentation/tuikit/gettingstarted.json index e975fc9..0c71232 100644 --- a/docs/data/documentation/tuikit/gettingstarted.json +++ b/docs/data/documentation/tuikit/gettingstarted.json @@ -1 +1 @@ -{"kind":"article","primaryContentSections":[{"content":[{"anchor":"Installation","type":"heading","level":2,"text":"Installation"},{"anchor":"Using-Swift-Package-Manager","type":"heading","level":3,"text":"Using Swift Package Manager"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add TUIKit to your "},{"type":"codeVoice","code":"Package.swift"},{"type":"text","text":":"}]},{"code":[".package(url: \"https:\/\/github.com\/anthropics\/SwiftTUI.git\", from: \"0.1.0\")"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Or via Xcode: File > Add Packages > Enter repository URL","type":"text"}]},{"anchor":"Creating-Your-First-App","type":"heading","level":2,"text":"Creating Your First App"},{"anchor":"1-Define-Your-App","type":"heading","level":3,"text":"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:"}]},{"code":["import TUIKit","","@main","struct HelloApp: App {"," var body: some Scene {"," WindowGroup {"," Text(\"Hello, TUIKit!\")"," }"," }","}"],"type":"codeListing","syntax":"swift"},{"anchor":"2-Add-Some-Layout","type":"heading","level":3,"text":"2. Add Some Layout"},{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"code":"VStack","type":"codeVoice"},{"text":" and ","type":"text"},{"code":"HStack","type":"codeVoice"},{"text":" to organize your content:","type":"text"}]},{"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":"codeListing","syntax":"swift"},{"anchor":"3-Make-It-Interactive","type":"heading","level":3,"text":"3. Make It Interactive"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add buttons and state to create interactive interfaces:"}]},{"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":"codeListing","syntax":"swift"},{"anchor":"Running-Your-App","type":"heading","level":2,"text":"Running Your App"},{"anchor":"From-Command-Line","type":"heading","level":3,"text":"From Command Line"},{"code":["swift run"],"type":"codeListing","syntax":"bash"},{"anchor":"With-a-Custom-Executable-Name","type":"heading","level":3,"text":"With a Custom Executable Name"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add to "},{"type":"codeVoice","code":"Package.swift"},{"type":"text","text":":"}]},{"code":[".executableTarget("," name: \"MyApp\","," dependencies: [.product(name: \"TUIKit\", package: \"SwiftTUI\")]",")"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Then run:","type":"text"}]},{"code":["swift run MyApp"],"type":"codeListing","syntax":"bash"},{"anchor":"Understanding-the-Basics","type":"heading","level":2,"text":"Understanding the Basics"},{"anchor":"Views","type":"heading","level":3,"text":"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":[{"type":"text","text":"Common views:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"code":"Text","type":"codeVoice"}],"type":"strong"},{"text":": Display text with optional styling","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"Button","type":"codeVoice"}],"type":"strong"},{"type":"text","text":": Interactive button with action handler"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"VStack","type":"codeVoice"}],"type":"strong"},{"text":": Arrange views vertically","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"HStack"}]},{"type":"text","text":": Arrange views horizontally"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Spacer"}],"type":"strong"},{"text":": Fill available space","type":"text"}],"type":"paragraph"}]}]},{"anchor":"State-Management","type":"heading","level":3,"text":"State Management"},{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"code":"@State","type":"codeVoice"},{"text":" to make your views interactive:","type":"text"}]},{"code":["@State var isVisible: Bool = true","","VStack {"," if isVisible {"," Text(\"Visible\")"," }"," Button(\"Toggle\") { isVisible.toggle() }","}"],"type":"codeListing","syntax":"swift"},{"anchor":"Modifiers","type":"heading","level":3,"text":"Modifiers"},{"type":"paragraph","inlineContent":[{"text":"Customize views with modifiers:","type":"text"}]},{"code":["Text(\"Hello\")"," .bold()"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)"],"type":"codeListing","syntax":"swift"},{"anchor":"Next-Steps","type":"heading","level":2,"text":"Next Steps"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Explore the "},{"isActive":true,"type":"reference","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":[{"inlineContent":[{"type":"text","text":"Discover "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"type":"text","text":" to customize colors and appearance"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Check out ","type":"text"},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"reference","isActive":true},{"text":" for all available styling options","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Try ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp"},{"text":" tutorial for step-by-step guidance","type":"text"}],"type":"paragraph"}]}]},{"anchor":"Key-Bindings","type":"heading","level":2,"text":"Key Bindings"},{"type":"paragraph","inlineContent":[{"type":"text","text":"By default, TUIKit apps support:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"q","type":"codeVoice"}],"type":"strong"},{"type":"text","text":": Quit the application"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"code":"t","type":"codeVoice"}]},{"text":": Cycle through themes","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"a"}]},{"type":"text","text":": Cycle through appearance styles"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"?","type":"codeVoice"}]},{"type":"text","text":": Show help"}],"type":"paragraph"}]}]},{"type":"paragraph","inlineContent":[{"text":"See ","type":"text"},{"code":"KeyEvent","type":"codeVoice"},{"text":" for custom keyboard handling.","type":"text"}]},{"anchor":"Terminal-Requirements","type":"heading","level":2,"text":"Terminal Requirements"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"text","text":"Minimum 80x24 character terminal"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"ANSI color support (256 colors recommended)","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"UTF-8 encoding","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Supports: macOS Terminal, iTerm2, Kitty, and Linux terminals (gnome-terminal, konsole, etc.)","type":"text"}]}]}]}],"kind":"content"}],"sections":[],"metadata":{"title":"Getting Started with TUIKit","role":"article","roleHeading":"Article"},"abstract":[{"type":"text","text":"Create your first terminal user interface in minutes."}],"schemaVersion":{"patch":0,"major":0,"minor":3},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"kind":"article","abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"url":"\/documentation\/tuikit\/viewhierarchy","title":"Understanding the View Hierarchy","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","role":"article","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"role":"article","url":"\/documentation\/tuikit\/modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"title":"View Modifiers","type":"topic"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"url":"\/documentation\/tuikit\/theming","type":"topic","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","title":"Theming System","abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"role":"article","type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","url":"\/documentation\/tuikit\/buildyourfirstapp","title":"Building Your First App","kind":"article","abstract":[{"type":"text","text":"Create a simple counter application to learn TUIKit basics."}]}}} \ No newline at end of file +{"kind":"article","metadata":{"roleHeading":"Article","role":"article","title":"Getting Started with TUIKit"},"schemaVersion":{"minor":3,"patch":0,"major":0},"abstract":[{"type":"text","text":"Create your first terminal user interface in minutes."}],"primaryContentSections":[{"content":[{"level":2,"text":"Installation","type":"heading","anchor":"Installation"},{"level":3,"text":"Using Swift Package Manager","type":"heading","anchor":"Using-Swift-Package-Manager"},{"type":"paragraph","inlineContent":[{"text":"Add TUIKit to your ","type":"text"},{"type":"codeVoice","code":"Package.swift"},{"text":":","type":"text"}]},{"code":[".package(url: \"https:\/\/github.com\/anthropics\/SwiftTUI.git\", from: \"0.1.0\")"],"type":"codeListing","syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Or via Xcode: File > Add Packages > Enter repository URL","type":"text"}]},{"level":2,"text":"Creating Your First App","type":"heading","anchor":"Creating-Your-First-App"},{"level":3,"text":"1. Define Your App","type":"heading","anchor":"1-Define-Your-App"},{"type":"paragraph","inlineContent":[{"text":"Every TUIKit app needs an ","type":"text"},{"code":"@main","type":"codeVoice"},{"text":" entry point that conforms to the ","type":"text"},{"code":"App","type":"codeVoice"},{"text":" protocol:","type":"text"}]},{"code":["import TUIKit","","@main","struct HelloApp: App {"," var body: some Scene {"," WindowGroup {"," Text(\"Hello, TUIKit!\")"," }"," }","}"],"type":"codeListing","syntax":"swift"},{"level":3,"text":"2. Add Some Layout","type":"heading","anchor":"2-Add-Some-Layout"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"VStack"},{"type":"text","text":" and "},{"type":"codeVoice","code":"HStack"},{"type":"text","text":" to organize your content:"}]},{"type":"codeListing","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":"heading","text":"3. Make It Interactive","level":3,"anchor":"3-Make-It-Interactive"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add buttons and state to create interactive interfaces:"}]},{"type":"codeListing","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":"heading","text":"Running Your App","level":2,"anchor":"Running-Your-App"},{"type":"heading","text":"From Command Line","level":3,"anchor":"From-Command-Line"},{"type":"codeListing","code":["swift run"],"syntax":"bash"},{"type":"heading","text":"With a Custom Executable Name","level":3,"anchor":"With-a-Custom-Executable-Name"},{"type":"paragraph","inlineContent":[{"text":"Add to ","type":"text"},{"code":"Package.swift","type":"codeVoice"},{"text":":","type":"text"}]},{"type":"codeListing","code":[".executableTarget("," name: \"MyApp\","," dependencies: [.product(name: \"TUIKit\", package: \"SwiftTUI\")]",")"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Then run:","type":"text"}]},{"type":"codeListing","code":["swift run MyApp"],"syntax":"bash"},{"type":"heading","text":"Understanding the Basics","level":2,"anchor":"Understanding-the-Basics"},{"type":"heading","text":"Views","level":3,"anchor":"Views"},{"type":"paragraph","inlineContent":[{"text":"Everything in TUIKit is a ","type":"text"},{"code":"View","type":"codeVoice"},{"text":". Views are lightweight, composable units that render content to the terminal.","type":"text"}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Common views:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"Text","type":"codeVoice"}]},{"type":"text","text":": Display text with optional styling"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"code":"Button","type":"codeVoice"}]},{"type":"text","text":": Interactive button with action handler"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"VStack"}],"type":"strong"},{"text":": Arrange views vertically","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"HStack"}]},{"text":": Arrange views horizontally","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"Spacer","type":"codeVoice"}],"type":"strong"},{"text":": Fill available space","type":"text"}]}]}]},{"type":"heading","text":"State Management","level":3,"anchor":"State-Management"},{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"code":"@State","type":"codeVoice"},{"text":" to make your views interactive:","type":"text"}]},{"type":"codeListing","code":["@State var isVisible: Bool = true","","VStack {"," if isVisible {"," Text(\"Visible\")"," }"," Button(\"Toggle\") { isVisible.toggle() }","}"],"syntax":"swift"},{"type":"heading","text":"Modifiers","level":3,"anchor":"Modifiers"},{"type":"paragraph","inlineContent":[{"text":"Customize views with modifiers:","type":"text"}]},{"type":"codeListing","code":["Text(\"Hello\")"," .bold()"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)"],"syntax":"swift"},{"type":"heading","text":"Next Steps","level":2,"anchor":"Next-Steps"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Explore the "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy"},{"type":"text","text":" to understand component organization"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Learn ","type":"text"},{"type":"reference","isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"},{"text":" for complex state scenarios","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Discover "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"type":"text","text":" to customize colors and appearance"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Check out ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers"},{"text":" for all available styling options","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Try "},{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","type":"reference","isActive":true},{"type":"text","text":" tutorial for step-by-step guidance"}],"type":"paragraph"}]}]},{"type":"heading","text":"Key Bindings","level":2,"anchor":"Key-Bindings"},{"type":"paragraph","inlineContent":[{"type":"text","text":"By default, TUIKit apps support:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"q"}],"type":"strong"},{"text":": Quit the application","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"t"}]},{"type":"text","text":": Cycle through themes"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"a"}],"type":"strong"},{"text":": Cycle through appearance styles","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"?","type":"codeVoice"}]},{"text":": Show help","type":"text"}],"type":"paragraph"}]}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"See "},{"code":"KeyEvent","type":"codeVoice"},{"type":"text","text":" for custom keyboard handling."}]},{"type":"heading","text":"Terminal Requirements","level":2,"anchor":"Terminal-Requirements"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Minimum 80x24 character terminal","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"ANSI color support (256 colors recommended)"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"UTF-8 encoding"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Supports: macOS Terminal, iTerm2, Kitty, and Linux terminals (gnome-terminal, konsole, etc.)","type":"text"}],"type":"paragraph"}]}]}],"kind":"content"}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted"},"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"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","url":"\/documentation\/tuikit\/theming","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","type":"topic","title":"Theming System"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"url":"\/documentation\/tuikit\/viewhierarchy","kind":"article","role":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","type":"topic","title":"Understanding the View Hierarchy"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"topic","role":"article","kind":"article","title":"View Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"url":"\/documentation\/tuikit\/modifiers"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","role":"article","kind":"article","title":"Building Your First App","abstract":[{"text":"Create a simple counter application to learn TUIKit basics.","type":"text"}],"url":"\/documentation\/tuikit\/buildyourfirstapp"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","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 f115d30..13c51bc 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"]]},"metadata":{"roleHeading":"Article","title":"View Modifiers","role":"article"},"primaryContentSections":[{"kind":"content","content":[{"anchor":"Overview","level":2,"type":"heading","text":"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"},{"syntax":"swift","type":"codeListing","code":["Text(\"Hello\")"," .bold()"," .foregroundColor(.theme.accent)"," .padding(1)"," .border(.rounded)"]},{"anchor":"Layout-Modifiers","level":2,"type":"heading","text":"Layout Modifiers"},{"type":"heading","text":"padding(_:)","level":3,"anchor":"padding"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add padding around content:"}]},{"type":"codeListing","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":"heading","text":"frame(width:height:alignment:)","level":3,"anchor":"framewidthheightalignment"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Set fixed size:"}]},{"type":"codeListing","syntax":"swift","code":["Text(\"Fixed\")"," .frame(width: 20, height: 5)","","Button(\"Button\")"," .frame(width: 15)"]},{"type":"heading","text":"frame(minWidth:maxWidth:minHeight:maxHeight:)","level":3,"anchor":"frameminWidthmaxWidthminHeightmaxHeight"},{"inlineContent":[{"type":"text","text":"Set flexible size constraints:"}],"type":"paragraph"},{"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,"text":"Color Modifiers","anchor":"Color-Modifiers","type":"heading"},{"level":3,"text":"foregroundColor(_:)","anchor":"foregroundColor","type":"heading"},{"inlineContent":[{"type":"text","text":"Set text color:"}],"type":"paragraph"},{"code":["Text(\"Colored\")"," .foregroundColor(.theme.accent)","","Text(\"Green\")"," .foregroundColor(.ansi(.brightGreen))","","Text(\"Custom\")"," .foregroundColor(.hex(\"FF5500\"))"],"syntax":"swift","type":"codeListing"},{"level":3,"text":"background(_:)","anchor":"background","type":"heading"},{"inlineContent":[{"text":"Add background color:","type":"text"}],"type":"paragraph"},{"code":["Text(\"Background\")"," .background(.theme.accent)"," .foregroundColor(.theme.background)"],"syntax":"swift","type":"codeListing"},{"level":2,"text":"Text Styling","anchor":"Text-Styling","type":"heading"},{"text":"Bold, Italic, Underline","type":"heading","level":3,"anchor":"Bold-Italic-Underline"},{"type":"codeListing","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":"paragraph","inlineContent":[{"type":"text","text":"Combine multiple modifiers:"}]},{"type":"codeListing","code":["Text(\"Complex\")"," .bold()"," .italic()"," .foregroundColor(.theme.accent)"],"syntax":"swift"},{"text":"Border and Structure","type":"heading","level":2,"anchor":"Border-and-Structure"},{"text":"border(_:)","type":"heading","level":3,"anchor":"border"},{"type":"paragraph","inlineContent":[{"text":"Add borders with different styles:","type":"text"}]},{"type":"codeListing","code":["Text(\"Bordered\")"," .border(.rounded)","","Text(\"Heavy border\")"," .border(.heavy, width: 2)","","VStack {"," Text(\"Content\")","}",".border(.block, color: .theme.accent)"],"syntax":"swift"},{"text":"Overlay and Compositing","type":"heading","level":2,"anchor":"Overlay-and-Compositing"},{"text":"overlay(_:)","type":"heading","level":3,"anchor":"overlay"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Layer content on top:"}]},{"type":"codeListing","code":["Text(\"Background\")"," .overlay {"," Text(\"Foreground\")"," }"],"syntax":"swift"},{"text":"dimmed()","type":"heading","level":3,"anchor":"dimmed"},{"type":"paragraph","inlineContent":[{"text":"Reduce visual emphasis:","type":"text"}]},{"type":"codeListing","code":["VStack {"," Text(\"Normal\")"," Text(\"Dimmed\")"," .dimmed()","}"],"syntax":"swift"},{"text":"modal()","type":"heading","level":3,"anchor":"modal"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Combine dimmed + centered overlay:"}]},{"type":"codeListing","code":["showAlert {"," Alert(title: \"Alert\", message: \"Message\")"," .modal()","}"],"syntax":"swift"},{"text":"Event Modifiers","type":"heading","level":2,"anchor":"Event-Modifiers"},{"text":"onKeyPress(_:)","type":"heading","level":3,"anchor":"onKeyPress"},{"type":"paragraph","inlineContent":[{"text":"Handle keyboard input:","type":"text"}]},{"type":"codeListing","code":["VStack {"," ContentView()","}",".onKeyPress { event in"," if event.key == .character(\"q\") {"," \/\/ Quit"," return true"," }"," return false","}"],"syntax":"swift"},{"text":"onAppear(_:)","type":"heading","level":3,"anchor":"onAppear"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Run code when view appears:"}]},{"type":"codeListing","code":["Text(\"Content\")"," .onAppear {"," print(\"View appeared\")"," }"],"syntax":"swift"},{"text":"onDisappear(_:)","type":"heading","level":3,"anchor":"onDisappear"},{"type":"paragraph","inlineContent":[{"text":"Run code when view disappears:","type":"text"}]},{"type":"codeListing","code":["Text(\"Content\")"," .onDisappear {"," print(\"View disappearing\")"," }"],"syntax":"swift"},{"text":"task(_:)","type":"heading","level":3,"anchor":"task"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Run async code:"}]},{"type":"codeListing","code":["VStack {"," ContentView()","}",".task {"," \/\/ Fetch data"," let data = try await fetchData()","}"],"syntax":"swift"},{"text":"Data Flow Modifiers","type":"heading","level":2,"anchor":"Data-Flow-Modifiers"},{"text":"environment(::)","type":"heading","level":3,"anchor":"environment"},{"type":"paragraph","inlineContent":[{"text":"Pass environment values to children:","type":"text"}]},{"type":"codeListing","code":["VStack {"," ContentView()","}",".environment(\\.theme, customTheme)"],"syntax":"swift"},{"text":"statusBarItems(_:)","type":"heading","level":3,"anchor":"statusBarItems"},{"type":"paragraph","inlineContent":[{"text":"Define status bar items:","type":"text"}]},{"type":"codeListing","code":["VStack {"," ContentView()","}",".statusBarItems {"," StatusBarItem("," label: \"Help\","," shortcut: Shortcut.letter(\"?\"),"," action: { print(\"Help\") }"," )","}"],"syntax":"swift"},{"text":"Combining Modifiers","type":"heading","level":2,"anchor":"Combining-Modifiers"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Modifiers are applied in order—the order matters:"}]},{"type":"codeListing","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"},{"text":"Creating Custom Modifiers","type":"heading","level":3,"anchor":"Creating-Custom-Modifiers"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Create reusable modifiers:"}]},{"type":"codeListing","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"},{"text":"Common Patterns","type":"heading","level":2,"anchor":"Common-Patterns"},{"text":"Centered Text","type":"heading","level":3,"anchor":"Centered-Text"},{"type":"codeListing","code":["Text(\"Centered\")"," .frame(maxWidth: .infinity, alignment: .center)"],"syntax":"swift"},{"text":"Full-Size Container","type":"heading","level":3,"anchor":"Full-Size-Container"},{"type":"codeListing","code":["VStack {"," ContentView()","}",".frame(maxWidth: .infinity, maxHeight: .infinity)"],"syntax":"swift"},{"text":"Bordered Section","type":"heading","level":3,"anchor":"Bordered-Section"},{"type":"codeListing","code":["VStack(spacing: 1) {"," Text(\"Title\").bold()"," ContentView()","}",".padding(1)",".border(.rounded)"],"syntax":"swift"},{"text":"Button Row","type":"heading","level":3,"anchor":"Button-Row"},{"type":"codeListing","code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}",".frame(maxWidth: .infinity, alignment: .trailing)"],"syntax":"swift"},{"text":"Related Topics","type":"heading","level":2,"anchor":"Related-Topics"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"ViewModifier"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"View\/padding(_:)-19gu9","type":"codeVoice"}],"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":[{"type":"codeVoice","code":"View\/foregroundColor(_:)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/overlay(alignment:content:)","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/onKeyPress(_:)"}]}]}]}]}],"kind":"article","sections":[],"schemaVersion":{"patch":0,"major":0,"minor":3},"abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"}}} \ No newline at end of file +{"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","interfaceLanguage":"swift"},"primaryContentSections":[{"content":[{"anchor":"Overview","type":"heading","text":"Overview","level":2},{"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)"]},{"anchor":"Layout-Modifiers","type":"heading","text":"Layout Modifiers","level":2},{"anchor":"padding","type":"heading","text":"padding(_:)","level":3},{"inlineContent":[{"text":"Add padding around content:","type":"text"}],"type":"paragraph"},{"type":"codeListing","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"]},{"anchor":"framewidthheightalignment","type":"heading","text":"frame(width:height:alignment:)","level":3},{"inlineContent":[{"type":"text","text":"Set fixed size:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Fixed\")"," .frame(width: 20, height: 5)","","Button(\"Button\")"," .frame(width: 15)"]},{"anchor":"frameminWidthmaxWidthminHeightmaxHeight","type":"heading","text":"frame(minWidth:maxWidth:minHeight:maxHeight:)","level":3},{"inlineContent":[{"type":"text","text":"Set flexible size constraints:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Flexible\")"," .frame(minWidth: 10, maxWidth: 50)"," .frame(minHeight: 3, maxHeight: 10)","","Text(\"Fill available space\")"," .frame(maxWidth: .infinity, maxHeight: .infinity)"]},{"anchor":"Color-Modifiers","type":"heading","text":"Color Modifiers","level":2},{"anchor":"foregroundColor","type":"heading","text":"foregroundColor(_:)","level":3},{"inlineContent":[{"type":"text","text":"Set text color:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Colored\")"," .foregroundColor(.theme.accent)","","Text(\"Green\")"," .foregroundColor(.ansi(.brightGreen))","","Text(\"Custom\")"," .foregroundColor(.hex(\"FF5500\"))"]},{"anchor":"background","type":"heading","text":"background(_:)","level":3},{"inlineContent":[{"text":"Add background color:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Background\")"," .background(.theme.accent)"," .foregroundColor(.theme.background)"]},{"anchor":"Text-Styling","type":"heading","text":"Text Styling","level":2},{"anchor":"Bold-Italic-Underline","type":"heading","text":"Bold, Italic, Underline","level":3},{"type":"codeListing","syntax":"swift","code":["Text(\"Bold\").bold()","Text(\"Italic\").italic()","Text(\"Underline\").underlined()","Text(\"Strikethrough\").strikethrough()","Text(\"Dim\").dimmed()","Text(\"Blinking\").blinking()","Text(\"Inverted\").inverted()"]},{"inlineContent":[{"type":"text","text":"Combine multiple modifiers:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Complex\")"," .bold()"," .italic()"," .foregroundColor(.theme.accent)"]},{"anchor":"Border-and-Structure","type":"heading","text":"Border and Structure","level":2},{"anchor":"border","type":"heading","text":"border(_:)","level":3},{"inlineContent":[{"type":"text","text":"Add borders with different styles:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Bordered\")"," .border(.rounded)","","Text(\"Heavy border\")"," .border(.heavy, width: 2)","","VStack {"," Text(\"Content\")","}",".border(.block, color: .theme.accent)"]},{"anchor":"Overlay-and-Compositing","type":"heading","text":"Overlay and Compositing","level":2},{"anchor":"overlay","type":"heading","text":"overlay(_:)","level":3},{"inlineContent":[{"type":"text","text":"Layer content on top:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Background\")"," .overlay {"," Text(\"Foreground\")"," }"]},{"anchor":"dimmed","type":"heading","text":"dimmed()","level":3},{"inlineContent":[{"text":"Reduce visual emphasis:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["VStack {"," Text(\"Normal\")"," Text(\"Dimmed\")"," .dimmed()","}"]},{"anchor":"modal","type":"heading","text":"modal()","level":3},{"inlineContent":[{"type":"text","text":"Combine dimmed + centered overlay:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["showAlert {"," Alert(title: \"Alert\", message: \"Message\")"," .modal()","}"]},{"anchor":"Event-Modifiers","type":"heading","text":"Event Modifiers","level":2},{"anchor":"onKeyPress","type":"heading","text":"onKeyPress(_:)","level":3},{"inlineContent":[{"type":"text","text":"Handle keyboard input:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["VStack {"," ContentView()","}",".onKeyPress { event in"," if event.key == .character(\"q\") {"," \/\/ Quit"," return true"," }"," return false","}"]},{"anchor":"onAppear","type":"heading","text":"onAppear(_:)","level":3},{"inlineContent":[{"text":"Run code when view appears:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Content\")"," .onAppear {"," print(\"View appeared\")"," }"]},{"anchor":"onDisappear","type":"heading","text":"onDisappear(_:)","level":3},{"inlineContent":[{"type":"text","text":"Run code when view disappears:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["Text(\"Content\")"," .onDisappear {"," print(\"View disappearing\")"," }"]},{"anchor":"task","type":"heading","text":"task(_:)","level":3},{"inlineContent":[{"text":"Run async code:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["VStack {"," ContentView()","}",".task {"," \/\/ Fetch data"," let data = try await fetchData()","}"]},{"anchor":"Data-Flow-Modifiers","type":"heading","text":"Data Flow Modifiers","level":2},{"anchor":"environment","type":"heading","text":"environment(::)","level":3},{"inlineContent":[{"text":"Pass environment values to children:","type":"text"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["VStack {"," ContentView()","}",".environment(\\.theme, customTheme)"]},{"anchor":"statusBarItems","type":"heading","text":"statusBarItems(_:)","level":3},{"inlineContent":[{"type":"text","text":"Define status bar items:"}],"type":"paragraph"},{"type":"codeListing","syntax":"swift","code":["VStack {"," ContentView()","}",".statusBarItems {"," StatusBarItem("," label: \"Help\","," shortcut: Shortcut.letter(\"?\"),"," action: { print(\"Help\") }"," )","}"]},{"anchor":"Combining-Modifiers","type":"heading","text":"Combining Modifiers","level":2},{"inlineContent":[{"text":"Modifiers are applied in order—the order matters:","type":"text"}],"type":"paragraph"},{"type":"codeListing","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)"]},{"anchor":"Creating-Custom-Modifiers","type":"heading","text":"Creating Custom Modifiers","level":3},{"inlineContent":[{"type":"text","text":"Create reusable modifiers:"}],"type":"paragraph"},{"type":"codeListing","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()"]},{"anchor":"Common-Patterns","type":"heading","text":"Common Patterns","level":2},{"anchor":"Centered-Text","type":"heading","text":"Centered Text","level":3},{"type":"codeListing","syntax":"swift","code":["Text(\"Centered\")"," .frame(maxWidth: .infinity, alignment: .center)"]},{"anchor":"Full-Size-Container","type":"heading","text":"Full-Size Container","level":3},{"type":"codeListing","syntax":"swift","code":["VStack {"," ContentView()","}",".frame(maxWidth: .infinity, maxHeight: .infinity)"]},{"anchor":"Bordered-Section","type":"heading","text":"Bordered Section","level":3},{"type":"codeListing","syntax":"swift","code":["VStack(spacing: 1) {"," Text(\"Title\").bold()"," ContentView()","}",".padding(1)",".border(.rounded)"]},{"anchor":"Button-Row","type":"heading","text":"Button Row","level":3},{"type":"codeListing","syntax":"swift","code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}",".frame(maxWidth: .infinity, alignment: .trailing)"]},{"anchor":"Related-Topics","type":"heading","text":"Related Topics","level":2},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"View","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"ViewModifier"}]}]},{"content":[{"inlineContent":[{"code":"View\/padding(_:)-19gu9","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/frame(width:height:alignment:)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/border(_:style:)-4xzvw","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/background(_:)"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"View\/foregroundColor(_:)","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/overlay(alignment:content:)"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"View\/onKeyPress(_:)","type":"codeVoice"}],"type":"paragraph"}]}],"type":"unorderedList"}],"kind":"content"}],"schemaVersion":{"major":0,"patch":0,"minor":3},"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"kind":"article","metadata":{"title":"View Modifiers","role":"article","roleHeading":"Article"},"abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/statemanagement.json b/docs/data/documentation/tuikit/statemanagement.json index 46c1acd..d351ff5 100644 --- a/docs/data/documentation/tuikit/statemanagement.json +++ b/docs/data/documentation/tuikit/statemanagement.json @@ -1 +1 @@ -{"kind":"article","schemaVersion":{"major":0,"patch":0,"minor":3},"primaryContentSections":[{"content":[{"type":"heading","text":"Overview","anchor":"Overview","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"TUIKit provides several mechanisms for managing state:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"code":"@State","type":"codeVoice"}]},{"text":": Local view state","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"code":"@Environment","type":"codeVoice"}]},{"type":"text","text":": Top-down data flow"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Binding"}],"type":"strong"},{"text":": Two-way data binding","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"@AppStorage","type":"codeVoice"}],"type":"strong"},{"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":"heading","text":"@State Property Wrapper","anchor":"State-Property-Wrapper","level":2},{"type":"paragraph","inlineContent":[{"code":"@State","type":"codeVoice"},{"type":"text","text":" stores local state within a view and automatically triggers re-renders when the value changes:"}]},{"type":"codeListing","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 }"," }"," }"," }","}"],"syntax":"swift"},{"type":"heading","text":"Rules for @State","anchor":"Rules-for-State","level":3},{"type":"unorderedList","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":[{"text":"Initialize with a default value","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Use only in views, not in view models","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"State is destroyed when view is removed from hierarchy","type":"text"}],"type":"paragraph"}]}]},{"type":"codeListing","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"," }"," }","}"],"syntax":"swift"},{"type":"heading","text":"Binding","anchor":"Binding","level":2},{"type":"paragraph","inlineContent":[{"text":"A ","type":"text"},{"type":"codeVoice","code":"Binding"},{"text":" creates a two-way connection between a view and a state variable:","type":"text"}]},{"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":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"$"},{"type":"text","text":" to create a binding to a state property."}]},{"type":"heading","text":"Creating Custom Bindings","anchor":"Creating-Custom-Bindings","level":3},{"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","anchor":"Environment-and-Environment-Keys","level":2},{"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","anchor":"Custom-Environment-Keys","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Define custom environment values:"}]},{"type":"codeListing","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)\")"," }","}"],"syntax":"swift"},{"type":"heading","text":"@AppStorage","anchor":"AppStorage","level":2},{"type":"paragraph","inlineContent":[{"code":"@AppStorage","type":"codeVoice"},{"text":" persists values to storage (UserDefaults on macOS, JSON file on Linux):","type":"text"}]},{"type":"codeListing","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"," }"," }","}"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Changes to ","type":"text"},{"code":"@AppStorage","type":"codeVoice"},{"text":" variables are automatically saved and restored across app launches.","type":"text"}]},{"type":"heading","text":"@SceneStorage","anchor":"SceneStorage","level":2},{"type":"paragraph","inlineContent":[{"code":"@SceneStorage","type":"codeVoice"},{"type":"text","text":" preserves state for the current scene:"}]},{"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()"," }"," }"," }"," }","}"],"syntax":"swift"},{"type":"heading","text":"Data Flow Pattern","anchor":"Data-Flow-Pattern","level":2},{"type":"heading","text":"Recommended Pattern","anchor":"Recommended-Pattern","level":3},{"type":"orderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Local state"}]},{"type":"text","text":": Use "},{"code":"@State","type":"codeVoice"},{"type":"text","text":" for temporary UI state"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Shared state"}],"type":"strong"},{"text":": Use ","type":"text"},{"code":"@Environment","type":"codeVoice"},{"text":" to pass to child views","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Persistent state","type":"text"}],"type":"strong"},{"type":"text","text":": Use "},{"code":"@AppStorage","type":"codeVoice"},{"type":"text","text":" for settings"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Child updates","type":"text"}],"type":"strong"},{"text":": Use ","type":"text"},{"code":"@Binding","type":"codeVoice"},{"text":" to let children modify parent state","type":"text"}],"type":"paragraph"}]}]},{"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)"," }"," }"," }","}"],"syntax":"swift"},{"type":"heading","text":"Related Topics","anchor":"Related-Topics","level":2},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"State"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"Binding","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"@Environment","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"@AppStorage","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"@SceneStorage"}]}]},{"content":[{"inlineContent":[{"code":"EnvironmentKey","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"EnvironmentValues","type":"codeVoice"}]}]}]}],"kind":"content"}],"sections":[],"metadata":{"role":"article","title":"State Management","roleHeading":"Article"},"abstract":[{"type":"text","text":"Learn how to manage application state and data flow in TUIKit."}],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","interfaceLanguage":"swift"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"}}} \ No newline at end of file +{"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","interfaceLanguage":"swift"},"primaryContentSections":[{"content":[{"text":"Overview","type":"heading","level":2,"anchor":"Overview"},{"type":"paragraph","inlineContent":[{"type":"text","text":"TUIKit provides several mechanisms for managing state:"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"@State"}],"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":[{"inlineContent":[{"code":"Binding","type":"codeVoice"}],"type":"strong"},{"text":": Two-way data binding","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"@AppStorage","type":"codeVoice"}],"type":"strong"},{"text":": Persistent application settings","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"@SceneStorage","type":"codeVoice"}],"type":"strong"},{"text":": Scene-specific state restoration","type":"text"}],"type":"paragraph"}]}]},{"text":"@State Property Wrapper","type":"heading","level":2,"anchor":"State-Property-Wrapper"},{"type":"paragraph","inlineContent":[{"code":"@State","type":"codeVoice"},{"type":"text","text":" stores local state within a view and automatically triggers re-renders when the value changes:"}]},{"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","syntax":"swift"},{"text":"Rules for @State","type":"heading","level":3,"anchor":"Rules-for-State"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Declare as ","type":"text"},{"code":"private","type":"codeVoice"},{"text":" to prevent external modification","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Initialize with a default value","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Use only in views, not in view models"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"State is destroyed when view is removed from hierarchy"}]}]}]},{"syntax":"swift","type":"codeListing","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"," }"," }","}"]},{"level":2,"anchor":"Binding","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"},{"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":"codeListing"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"$"},{"type":"text","text":" to create a binding to a state property."}]},{"text":"Creating Custom Bindings","type":"heading","anchor":"Creating-Custom-Bindings","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Create computed bindings for complex logic:"}]},{"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":"codeListing"},{"text":"@Environment and Environment Keys","type":"heading","anchor":"Environment-and-Environment-Keys","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"Environment provides top-down data flow to all child views:"}]},{"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":"codeListing"},{"text":"Custom Environment Keys","type":"heading","anchor":"Custom-Environment-Keys","level":3},{"type":"paragraph","inlineContent":[{"text":"Define custom environment values:","type":"text"}]},{"syntax":"swift","type":"codeListing","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)\")"," }","}"]},{"level":2,"anchor":"AppStorage","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","type":"codeListing","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"," }"," }","}"]},{"inlineContent":[{"text":"Changes to ","type":"text"},{"code":"@AppStorage","type":"codeVoice"},{"text":" variables are automatically saved and restored across app launches.","type":"text"}],"type":"paragraph"},{"level":2,"anchor":"SceneStorage","text":"@SceneStorage","type":"heading"},{"inlineContent":[{"code":"@SceneStorage","type":"codeVoice"},{"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()"," }"," }"," }"," }","}"]},{"level":2,"anchor":"Data-Flow-Pattern","text":"Data Flow Pattern","type":"heading"},{"level":3,"anchor":"Recommended-Pattern","text":"Recommended Pattern","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Local state","type":"text"}],"type":"strong"},{"text":": Use ","type":"text"},{"code":"@State","type":"codeVoice"},{"text":" for temporary UI state","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Shared state"}]},{"type":"text","text":": Use "},{"code":"@Environment","type":"codeVoice"},{"type":"text","text":" to pass to child views"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Persistent state","type":"text"}]},{"type":"text","text":": Use "},{"code":"@AppStorage","type":"codeVoice"},{"type":"text","text":" for settings"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Child updates","type":"text"}],"type":"strong"},{"text":": Use ","type":"text"},{"code":"@Binding","type":"codeVoice"},{"text":" to let children modify parent state","type":"text"}]}]}],"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)"," }"," }"," }","}"]},{"level":2,"anchor":"Related-Topics","text":"Related Topics","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"State"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Binding"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"@Environment"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"@AppStorage","type":"codeVoice"}]}]},{"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"}],"kind":"content"}],"schemaVersion":{"major":0,"patch":0,"minor":3},"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"kind":"article","metadata":{"role":"article","title":"State Management","roleHeading":"Article"},"abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/theming.json b/docs/data/documentation/tuikit/theming.json index 91230fa..513ad55 100644 --- a/docs/data/documentation/tuikit/theming.json +++ b/docs/data/documentation/tuikit/theming.json @@ -1 +1 @@ -{"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"schemaVersion":{"major":0,"minor":3,"patch":0},"kind":"article","metadata":{"title":"Theming System","roleHeading":"Article","role":"article"},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},"sections":[],"primaryContentSections":[{"kind":"content","content":[{"text":"Built-in Themes","level":2,"anchor":"Built-in-Themes","type":"heading"},{"inlineContent":[{"text":"TUIKit includes 4 beautiful phosphor-style themes:","type":"text"}],"type":"paragraph"},{"text":"Green Theme","level":3,"anchor":"Green-Theme","type":"heading"},{"inlineContent":[{"type":"text","text":"Classic green phosphor aesthetic for a retro terminal feel:"}],"type":"paragraph"},{"code":[".environment(\\.themeManager.currentTheme, .green)"],"syntax":"swift","type":"codeListing"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Accent"}]},{"text":": Bright green","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Background","type":"text"}]},{"text":": Deep dark green","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"text":"Foreground","type":"text"}],"type":"strong"},{"text":": Light green text","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"text":"Amber Theme","level":3,"anchor":"Amber-Theme","type":"heading"},{"inlineContent":[{"type":"text","text":"Warm amber\/orange phosphor theme:"}],"type":"paragraph"},{"code":[".environment(\\.themeManager.currentTheme, .amber)"],"syntax":"swift","type":"codeListing"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"type":"strong"},{"text":": Bright amber","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Background"}]},{"type":"text","text":": Dark brown-orange"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Foreground","type":"text"}]},{"text":": Light amber text","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"text":"White Theme","level":3,"anchor":"White-Theme","type":"heading"},{"inlineContent":[{"type":"text","text":"Cool white\/blue-tinted theme for modern appearance:"}],"type":"paragraph"},{"code":[".environment(\\.themeManager.currentTheme, .white)"],"syntax":"swift","type":"codeListing"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"type":"strong"},{"text":": Bright white","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Background","type":"text"}],"type":"strong"},{"text":": Deep blue-black","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Foreground","type":"text"}]},{"type":"text","text":": Light white text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"text":"Red Theme","level":3,"anchor":"Red-Theme","type":"heading"},{"inlineContent":[{"text":"Bold red phosphor theme:","type":"text"}],"type":"paragraph"},{"code":[".environment(\\.themeManager.currentTheme, .red)"],"syntax":"swift","type":"codeListing"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"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":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Foreground","type":"text"}],"type":"strong"},{"text":": Light red text","type":"text"}]}]}],"type":"unorderedList"},{"text":"Using Themes","level":2,"anchor":"Using-Themes","type":"heading"},{"text":"Default Theme","level":3,"anchor":"Default-Theme","type":"heading"},{"inlineContent":[{"text":"By default, the Green theme is active:","type":"text"}],"type":"paragraph"},{"code":["@main","struct MyApp: App {"," var body: some Scene {"," WindowGroup {"," ContentView()"," }"," }","}"],"syntax":"swift","type":"codeListing"},{"text":"Switching Themes","level":3,"anchor":"Switching-Themes","type":"heading"},{"inlineContent":[{"type":"text","text":"Use the theme manager to switch themes at runtime:"}],"type":"paragraph"},{"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":"codeListing"},{"text":"Accessing Theme Colors","level":3,"anchor":"Accessing-Theme-Colors","type":"heading"},{"inlineContent":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"Color.theme"},{"type":"text","text":" shorthand to access current theme colors:"}],"type":"paragraph"},{"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":"codeListing"},{"text":"Theme Protocol","level":2,"anchor":"Theme-Protocol","type":"heading"},{"inlineContent":[{"text":"Themes conform to the ","type":"text"},{"code":"Theme","type":"codeVoice"},{"text":" protocol:","type":"text"}],"type":"paragraph"},{"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":"codeListing"},{"text":"Creating Custom Themes","level":2,"anchor":"Creating-Custom-Themes","type":"heading"},{"inlineContent":[{"text":"Implement the ","type":"text"},{"code":"Theme","type":"codeVoice"},{"text":" protocol to create custom themes:","type":"text"}],"type":"paragraph"},{"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":"codeListing"},{"text":"Color System","level":2,"anchor":"Color-System","type":"heading"},{"inlineContent":[{"text":"TUIKit supports multiple color spaces:","type":"text"}],"type":"paragraph"},{"text":"ANSI Colors","level":3,"anchor":"ANSI-Colors","type":"heading"},{"inlineContent":[{"type":"text","text":"Use standard terminal colors:"}],"type":"paragraph"},{"code":["Color.ansi(.brightGreen)","Color.ansi(.red)"],"syntax":"swift","type":"codeListing"},{"text":"Hex Colors","level":3,"anchor":"Hex-Colors","type":"heading"},{"inlineContent":[{"text":"Specify colors as hex strings or integers:","type":"text"}],"type":"paragraph"},{"code":["Color.hex(\"FF5500\")","Color.hex(\"#FF5500\")","Color.hex(0xFF5500)"],"syntax":"swift","type":"codeListing"},{"text":"RGB Colors","level":3,"anchor":"RGB-Colors","type":"heading"},{"inlineContent":[{"text":"Define colors by RGB values:","type":"text"}],"type":"paragraph"},{"code":["Color.rgb(red: 255, green: 85, blue: 0)","Color.rgb(red: 1.0, green: 0.33, blue: 0.0)"],"syntax":"swift","type":"codeListing"},{"text":"256-Color Palette","level":3,"anchor":"256-Color-Palette","type":"heading"},{"inlineContent":[{"text":"Use 256-color terminal palette (0-255):","type":"text"}],"type":"paragraph"},{"code":["Color.palette256(196)"],"syntax":"swift","type":"codeListing"},{"text":"HSL Colors","level":3,"anchor":"HSL-Colors","type":"heading"},{"inlineContent":[{"type":"text","text":"Create colors using HSL (Hue, Saturation, Lightness):"}],"type":"paragraph"},{"code":["Color.hsl(hue: 25, saturation: 100, lightness: 50)"],"syntax":"swift","type":"codeListing"},{"text":"Color Modifiers","level":2,"anchor":"Color-Modifiers","type":"heading"},{"inlineContent":[{"type":"text","text":"Adjust colors programmatically:"}],"type":"paragraph"},{"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":"codeListing"},{"text":"Theme Cycling","level":2,"anchor":"Theme-Cycling","type":"heading"},{"inlineContent":[{"type":"text","text":"The example app supports theme cycling with the "},{"type":"codeVoice","code":"t"},{"type":"text","text":" key:"}],"type":"paragraph"},{"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":"codeListing"},{"text":"Best Practices","level":2,"anchor":"Best-Practices","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Use semantic colors","type":"text"}],"type":"strong"},{"type":"text","text":": Reference "},{"code":"Color.theme.accent","type":"codeVoice"},{"type":"text","text":" instead of hardcoding colors"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Test readability"}]},{"type":"text","text":": Ensure sufficient contrast in custom themes"}]}]},{"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":[{"type":"strong","inlineContent":[{"type":"text","text":"Store preferences"}]},{"text":": Use ","type":"text"},{"type":"codeVoice","code":"@AppStorage"},{"text":" to remember user theme choice","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Provide visual feedback","type":"text"}]},{"text":": Show current theme in settings","type":"text"}],"type":"paragraph"}]}],"type":"orderedList"},{"text":"Related Topics","level":2,"anchor":"Related-Topics","type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"code":"Color","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Theme"}]}]},{"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":[{"inlineContent":[{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","isActive":true}],"type":"paragraph"}]}],"type":"unorderedList"}]}],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"title":"Appearance System","type":"topic","kind":"article","url":"\/documentation\/tuikit\/appearance","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","role":"article"}}} \ No newline at end of file +{"metadata":{"role":"article","title":"Theming System","roleHeading":"Article"},"abstract":[{"text":"Customize the appearance of your application with TUIKit’s flexible theming system.","type":"text"}],"primaryContentSections":[{"content":[{"anchor":"Built-in-Themes","text":"Built-in Themes","level":2,"type":"heading"},{"inlineContent":[{"type":"text","text":"TUIKit includes 4 beautiful phosphor-style themes:"}],"type":"paragraph"},{"anchor":"Green-Theme","text":"Green Theme","level":3,"type":"heading"},{"inlineContent":[{"type":"text","text":"Classic green phosphor aesthetic for a retro terminal feel:"}],"type":"paragraph"},{"code":[".environment(\\.themeManager.currentTheme, .green)"],"syntax":"swift","type":"codeListing"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Accent"}]},{"text":": Bright green","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Background"}]},{"text":": Deep dark green","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Foreground"}]},{"type":"text","text":": Light green text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"Amber-Theme","text":"Amber Theme","level":3,"type":"heading"},{"inlineContent":[{"text":"Warm amber\/orange phosphor theme:","type":"text"}],"type":"paragraph"},{"code":[".environment(\\.themeManager.currentTheme, .amber)"],"syntax":"swift","type":"codeListing"},{"items":[{"content":[{"inlineContent":[{"inlineContent":[{"text":"Accent","type":"text"}],"type":"strong"},{"text":": Bright amber","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Background"}],"type":"strong"},{"text":": Dark brown-orange","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Foreground","type":"text"}],"type":"strong"},{"type":"text","text":": Light amber text"}]}]}],"type":"unorderedList"},{"anchor":"White-Theme","text":"White Theme","level":3,"type":"heading"},{"type":"paragraph","inlineContent":[{"text":"Cool white\/blue-tinted theme for modern appearance:","type":"text"}]},{"type":"codeListing","code":[".environment(\\.themeManager.currentTheme, .white)"],"syntax":"swift"},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Accent"}],"type":"strong"},{"text":": Bright white","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Background"}],"type":"strong"},{"type":"text","text":": Deep blue-black"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Foreground"}]},{"type":"text","text":": Light white text"}],"type":"paragraph"}]}]},{"level":3,"type":"heading","text":"Red Theme","anchor":"Red-Theme"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Bold red phosphor theme:"}]},{"type":"codeListing","code":[".environment(\\.themeManager.currentTheme, .red)"],"syntax":"swift"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Accent","type":"text"}]},{"text":": Bright red","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Background","type":"text"}]},{"text":": Dark red-black","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Foreground","type":"text"}]},{"text":": Light red text","type":"text"}],"type":"paragraph"}]}]},{"level":2,"type":"heading","text":"Using Themes","anchor":"Using-Themes"},{"level":3,"type":"heading","text":"Default Theme","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"},{"level":3,"type":"heading","text":"Switching Themes","anchor":"Switching-Themes"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use the theme manager to switch themes at runtime:"}]},{"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"},{"level":3,"type":"heading","text":"Accessing Theme Colors","anchor":"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"},{"level":2,"type":"heading","text":"Theme Protocol","anchor":"Theme-Protocol"},{"type":"paragraph","inlineContent":[{"text":"Themes conform to the ","type":"text"},{"type":"codeVoice","code":"Theme"},{"text":" protocol:","type":"text"}]},{"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"},{"level":2,"type":"heading","text":"Creating Custom Themes","anchor":"Creating-Custom-Themes"},{"type":"paragraph","inlineContent":[{"text":"Implement the ","type":"text"},{"code":"Theme","type":"codeVoice"},{"text":" protocol to create custom themes:","type":"text"}]},{"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"},{"level":2,"type":"heading","text":"Color System","anchor":"Color-System"},{"type":"paragraph","inlineContent":[{"text":"TUIKit supports multiple color spaces:","type":"text"}]},{"level":3,"type":"heading","text":"ANSI Colors","anchor":"ANSI-Colors"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use standard terminal colors:"}]},{"type":"codeListing","code":["Color.ansi(.brightGreen)","Color.ansi(.red)"],"syntax":"swift"},{"level":3,"type":"heading","text":"Hex Colors","anchor":"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"},{"level":3,"type":"heading","text":"RGB Colors","anchor":"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"},{"level":3,"type":"heading","text":"256-Color Palette","anchor":"256-Color-Palette"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use 256-color terminal palette (0-255):"}]},{"type":"codeListing","code":["Color.palette256(196)"],"syntax":"swift"},{"level":3,"type":"heading","text":"HSL Colors","anchor":"HSL-Colors"},{"type":"paragraph","inlineContent":[{"text":"Create colors using HSL (Hue, Saturation, Lightness):","type":"text"}]},{"type":"codeListing","code":["Color.hsl(hue: 25, saturation: 100, lightness: 50)"],"syntax":"swift"},{"level":2,"type":"heading","text":"Color Modifiers","anchor":"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"},{"level":2,"type":"heading","text":"Theme Cycling","anchor":"Theme-Cycling"},{"type":"paragraph","inlineContent":[{"text":"The example app supports theme cycling with the ","type":"text"},{"type":"codeVoice","code":"t"},{"text":" key:","type":"text"}]},{"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"},{"level":2,"type":"heading","text":"Best Practices","anchor":"Best-Practices"},{"type":"orderedList","items":[{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Use semantic colors"}],"type":"strong"},{"text":": Reference ","type":"text"},{"code":"Color.theme.accent","type":"codeVoice"},{"text":" instead of hardcoding colors","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Test readability"}]},{"type":"text","text":": Ensure sufficient contrast in custom themes"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Support all modes","type":"text"}]},{"type":"text","text":": Create both dark and light themed colors if needed"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Store preferences","type":"text"}]},{"type":"text","text":": Use "},{"type":"codeVoice","code":"@AppStorage"},{"type":"text","text":" to remember user theme choice"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"text","text":"Provide visual feedback"}],"type":"strong"},{"text":": Show current theme in settings","type":"text"}],"type":"paragraph"}]}]},{"level":2,"type":"heading","text":"Related Topics","anchor":"Related-Topics"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"Color"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"Theme"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"ThemeManager","type":"codeVoice"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference"}]}]}]}],"kind":"content"}],"schemaVersion":{"major":0,"patch":0,"minor":3},"sections":[],"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"kind":"article","identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Appearance":{"type":"topic","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Appearance","title":"Appearance System","url":"\/documentation\/tuikit\/appearance","kind":"article","abstract":[{"type":"text","text":"Learn about the 5 structural appearance styles for rendering borders and containers."}],"role":"article"}}} \ No newline at end of file diff --git a/docs/data/documentation/tuikit/viewhierarchy.json b/docs/data/documentation/tuikit/viewhierarchy.json index 9255d37..f98df36 100644 --- a/docs/data/documentation/tuikit/viewhierarchy.json +++ b/docs/data/documentation/tuikit/viewhierarchy.json @@ -1 +1 @@ -{"sections":[],"abstract":[{"text":"Learn how TUIKit’s declarative view model works and how to compose views effectively.","type":"text"}],"kind":"article","primaryContentSections":[{"kind":"content","content":[{"type":"heading","anchor":"The-View-Protocol","text":"The View Protocol","level":2},{"type":"paragraph","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":"codeListing","syntax":"swift","code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"]},{"type":"paragraph","inlineContent":[{"type":"text","text":"Views are "},{"type":"strong","inlineContent":[{"type":"text","text":"not"}]},{"type":"text","text":" the rendered output—they’re descriptions of UI that get rendered when needed."}]},{"type":"heading","anchor":"Primitive-Views","text":"Primitive Views","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Some views have "},{"code":"body: Never","type":"codeVoice"},{"type":"text","text":" and directly conform to "},{"code":"Renderable","type":"codeVoice"},{"type":"text","text":". These render their own content:"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Text"}],"type":"strong"},{"type":"text","text":": Display text with styling"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Button"}]},{"type":"text","text":": Interactive clickable element"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Menu"}]},{"text":": Selection menu with keyboard navigation","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Spacer"}],"type":"strong"},{"text":": Occupy available space","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"Divider","type":"codeVoice"}]},{"type":"text","text":": Horizontal or vertical separator"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"EmptyView"}],"type":"strong"},{"text":": Invisible placeholder view","type":"text"}]}]}]},{"type":"heading","anchor":"Composite-Views","text":"Composite Views","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Most views define a "},{"code":"body","type":"codeVoice"},{"type":"text","text":" that combines other views:"}]},{"type":"codeListing","syntax":"swift","code":["struct MyCard: View {"," var body: some View {"," VStack(spacing: 1) {"," Text(\"Title\").bold()"," Text(\"Content\")"," }"," .border(.rounded)"," }","}"]},{"type":"paragraph","inlineContent":[{"text":"Composite views don’t render directly—the renderer walks the view tree and renders primitives.","type":"text"}]},{"type":"heading","anchor":"Container-Views","text":"Container Views","level":2},{"type":"heading","anchor":"VStack-Vertical-Stack","text":"VStack (Vertical Stack)","level":3},{"type":"paragraph","inlineContent":[{"text":"Stack views vertically with optional spacing:","type":"text"}]},{"type":"codeListing","syntax":"swift","code":["VStack(spacing: 1) {"," Text(\"First\")"," Text(\"Second\")"," Text(\"Third\")","}"]},{"type":"heading","anchor":"HStack-Horizontal-Stack","text":"HStack (Horizontal Stack)","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Stack views horizontally:"}]},{"type":"codeListing","syntax":"swift","code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}"]},{"type":"heading","anchor":"ZStack-Depth-Stack","text":"ZStack (Depth Stack)","level":3},{"type":"paragraph","inlineContent":[{"text":"Layer views on top of each other:","type":"text"}]},{"type":"codeListing","syntax":"swift","code":["ZStack {"," Text(\"Background\")"," Text(\"Foreground\")","}"]},{"type":"heading","anchor":"ForEach","text":"ForEach","level":3},{"type":"paragraph","inlineContent":[{"text":"Render a collection of items:","type":"text"}]},{"type":"codeListing","syntax":"swift","code":["ForEach(items) { item in"," Text(item.name)","}"]},{"type":"heading","anchor":"Control-Flow","text":"Control Flow","level":2},{"type":"heading","anchor":"Conditionals","text":"Conditionals","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use standard Swift "},{"type":"codeVoice","code":"if"},{"type":"text","text":" statements:"}]},{"type":"codeListing","syntax":"swift","code":["if isLoading {"," Text(\"Loading...\")","} else {"," Text(\"Loaded!\")","}"]},{"type":"heading","anchor":"Optional-Values","text":"Optional Values","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Handle optional views:"}]},{"type":"codeListing","syntax":"swift","code":["if let name = userName {"," Text(\"Hello, \\(name)\")","} else {"," Text(\"Not logged in\")","}"]},{"type":"heading","anchor":"The-ViewBuilder-Result-Builder","text":"The ViewBuilder Result Builder","level":2},{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"@ViewBuilder"},{"type":"text","text":" is a result builder that enables the declarative syntax:"}]},{"type":"codeListing","syntax":"swift","code":["@ViewBuilder","var content: some View {"," if condition {"," Text(\"A\")"," } else {"," Text(\"B\")"," }"," Text(\"C\")","}"]},{"type":"paragraph","inlineContent":[{"text":"It supports:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"text":"Up to 10 children without nesting","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"if\/else if\/else","type":"codeVoice"},{"text":" conditionals","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"if let","type":"codeVoice"},{"text":" optional unwrapping","type":"text"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Arrays and "},{"type":"codeVoice","code":"ForEach"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Nested result builders","type":"text"}]}]}]},{"type":"heading","anchor":"Type-Erasure-with-AnyView","text":"Type Erasure with AnyView","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"When you need to return different view types, use "},{"type":"codeVoice","code":"AnyView"},{"type":"text","text":":"}]},{"type":"codeListing","syntax":"swift","code":["func makeView(condition: Bool) -> AnyView {"," if condition {"," return AnyView(Text(\"A\"))"," } else {"," return AnyView(VStack { Text(\"B\") })"," }","}"]},{"type":"aside","content":[{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"code":"AnyView","type":"codeVoice"},{"text":" sparingly—prefer ","type":"text"},{"code":"@ViewBuilder","type":"codeVoice"},{"text":" when possible.","type":"text"}]}],"style":"note","name":"Note"},{"type":"heading","anchor":"Custom-Views","text":"Custom Views","level":2},{"type":"paragraph","inlineContent":[{"text":"Create your own reusable components:","type":"text"}]},{"type":"codeListing","syntax":"swift","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\")","})"]},{"type":"heading","anchor":"View-Composition-Pattern","text":"View Composition Pattern","level":2},{"type":"paragraph","inlineContent":[{"text":"Build complex UIs by composing smaller views:","type":"text"}]},{"type":"codeListing","syntax":"swift","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\")"," }","}"]},{"type":"heading","anchor":"View-Lifetime","text":"View Lifetime","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"Views are value types—they’re created, rendered, and discarded. They don’t have persistent storage. Use "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" for state that persists across renders:"}]},{"type":"codeListing","syntax":"swift","code":["struct Counter: View {"," @State var count: Int = 0",""," var body: some View {"," VStack {"," Text(\"Count: \\(count)\")"," Button(\"Increment\") { count += 1 }"," }"," }","}"]},{"type":"heading","anchor":"Related-Topics","text":"Related Topics","level":2},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"@ViewBuilder"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"VStack"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"HStack"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"ZStack"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","type":"reference","isActive":true}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"isActive":true,"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"reference"}]}]}]}]}],"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"schemaVersion":{"minor":3,"major":0,"patch":0},"metadata":{"title":"Understanding the View Hierarchy","role":"article","roleHeading":"Article"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"url":"\/documentation\/tuikit\/statemanagement","type":"topic","role":"article","identifier":"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","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"url":"\/documentation\/tuikit","type":"topic","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","abstract":[],"title":"TUIKit","kind":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"role":"article","url":"\/documentation\/tuikit\/modifiers","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"title":"View Modifiers","type":"topic"}}} \ No newline at end of file +{"schemaVersion":{"major":0,"minor":3,"patch":0},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","interfaceLanguage":"swift"},"metadata":{"title":"Understanding the View Hierarchy","role":"article","roleHeading":"Article"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"primaryContentSections":[{"content":[{"type":"heading","text":"The View Protocol","anchor":"The-View-Protocol","level":2},{"type":"paragraph","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":"codeListing","code":["public protocol View {"," associatedtype Body: View"," @ViewBuilder var body: Body { get }","}"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Views are ","type":"text"},{"inlineContent":[{"text":"not","type":"text"}],"type":"strong"},{"text":" the rendered output—they’re descriptions of UI that get rendered when needed.","type":"text"}]},{"type":"heading","text":"Primitive Views","anchor":"Primitive-Views","level":3},{"type":"paragraph","inlineContent":[{"text":"Some views have ","type":"text"},{"type":"codeVoice","code":"body: Never"},{"text":" and directly conform to ","type":"text"},{"type":"codeVoice","code":"Renderable"},{"text":". These render their own content:","type":"text"}]},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Text"}]},{"text":": Display text with styling","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Button"}]},{"type":"text","text":": Interactive clickable element"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"Menu","type":"codeVoice"}],"type":"strong"},{"text":": Selection menu with keyboard navigation","type":"text"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"Spacer"}],"type":"strong"},{"text":": Occupy available space","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Divider"}]},{"type":"text","text":": Horizontal or vertical separator"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"EmptyView"}]},{"text":": Invisible placeholder view","type":"text"}]}]}]},{"type":"heading","text":"Composite Views","anchor":"Composite-Views","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Most views define a "},{"code":"body","type":"codeVoice"},{"type":"text","text":" that combines other views:"}]},{"type":"codeListing","code":["struct MyCard: View {"," var body: some View {"," VStack(spacing: 1) {"," Text(\"Title\").bold()"," Text(\"Content\")"," }"," .border(.rounded)"," }","}"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"text":"Composite views don’t render directly—the renderer walks the view tree and renders primitives.","type":"text"}]},{"type":"heading","text":"Container Views","anchor":"Container-Views","level":2},{"type":"heading","text":"VStack (Vertical Stack)","anchor":"VStack-Vertical-Stack","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Stack views vertically with optional spacing:"}]},{"type":"codeListing","code":["VStack(spacing: 1) {"," Text(\"First\")"," Text(\"Second\")"," Text(\"Third\")","}"],"syntax":"swift"},{"type":"heading","text":"HStack (Horizontal Stack)","anchor":"HStack-Horizontal-Stack","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Stack views horizontally:"}]},{"type":"codeListing","code":["HStack(spacing: 2) {"," Button(\"OK\") { }"," Button(\"Cancel\") { }","}"],"syntax":"swift"},{"type":"heading","text":"ZStack (Depth Stack)","anchor":"ZStack-Depth-Stack","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Layer views on top of each other:"}]},{"type":"codeListing","code":["ZStack {"," Text(\"Background\")"," Text(\"Foreground\")","}"],"syntax":"swift"},{"type":"heading","text":"ForEach","anchor":"ForEach","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Render a collection of items:"}]},{"type":"codeListing","code":["ForEach(items) { item in"," Text(item.name)","}"],"syntax":"swift"},{"type":"heading","text":"Control Flow","anchor":"Control-Flow","level":2},{"type":"heading","text":"Conditionals","anchor":"Conditionals","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Use standard Swift "},{"code":"if","type":"codeVoice"},{"type":"text","text":" statements:"}]},{"type":"codeListing","code":["if isLoading {"," Text(\"Loading...\")","} else {"," Text(\"Loaded!\")","}"],"syntax":"swift"},{"type":"heading","text":"Optional Values","anchor":"Optional-Values","level":3},{"type":"paragraph","inlineContent":[{"type":"text","text":"Handle optional views:"}]},{"type":"codeListing","code":["if let name = userName {"," Text(\"Hello, \\(name)\")","} else {"," Text(\"Not logged in\")","}"],"syntax":"swift"},{"type":"heading","text":"The ViewBuilder Result Builder","anchor":"The-ViewBuilder-Result-Builder","level":2},{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"@ViewBuilder"},{"type":"text","text":" is a result builder that enables the declarative syntax:"}]},{"type":"codeListing","code":["@ViewBuilder","var content: some View {"," if condition {"," Text(\"A\")"," } else {"," Text(\"B\")"," }"," Text(\"C\")","}"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"type":"text","text":"It supports:"}]},{"type":"unorderedList","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"},{"type":"text","text":" conditionals"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"if let"},{"type":"text","text":" optional unwrapping"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Arrays and "},{"type":"codeVoice","code":"ForEach"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Nested result builders"}]}]}]},{"type":"heading","text":"Type Erasure with AnyView","anchor":"Type-Erasure-with-AnyView","level":2},{"type":"paragraph","inlineContent":[{"text":"When you need to return different view types, use ","type":"text"},{"code":"AnyView","type":"codeVoice"},{"text":":","type":"text"}]},{"type":"codeListing","code":["func makeView(condition: Bool) -> AnyView {"," if condition {"," return AnyView(Text(\"A\"))"," } else {"," return AnyView(VStack { Text(\"B\") })"," }","}"],"syntax":"swift"},{"type":"aside","style":"note","content":[{"type":"paragraph","inlineContent":[{"text":"Use ","type":"text"},{"code":"AnyView","type":"codeVoice"},{"text":" sparingly—prefer ","type":"text"},{"code":"@ViewBuilder","type":"codeVoice"},{"text":" when possible.","type":"text"}]}],"name":"Note"},{"type":"heading","text":"Custom Views","anchor":"Custom-Views","level":2},{"type":"paragraph","inlineContent":[{"text":"Create your own reusable components:","type":"text"}]},{"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\")","})"],"syntax":"swift"},{"type":"heading","text":"View Composition Pattern","anchor":"View-Composition-Pattern","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"Build complex UIs by composing smaller views:"}]},{"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\")"," }","}"],"syntax":"swift"},{"type":"heading","text":"View Lifetime","anchor":"View-Lifetime","level":2},{"type":"paragraph","inlineContent":[{"type":"text","text":"Views are value types—they’re created, rendered, and discarded. They don’t have persistent storage. Use "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" for state that persists across renders:"}]},{"type":"codeListing","code":["struct Counter: View {"," @State var count: Int = 0",""," var body: some View {"," VStack {"," Text(\"Count: \\(count)\")"," Button(\"Increment\") { count += 1 }"," }"," }","}"],"syntax":"swift"},{"type":"heading","text":"Related Topics","anchor":"Related-Topics","level":2},{"type":"unorderedList","items":[{"content":[{"inlineContent":[{"code":"View","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"code":"@ViewBuilder","type":"codeVoice"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"VStack"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"HStack","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"ZStack"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers"}]}]}]}],"kind":"content"}],"abstract":[{"text":"Learn how TUIKit’s declarative view model works and how to compose views effectively.","type":"text"}],"kind":"article","sections":[],"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"abstract":[],"kind":"article","url":"\/documentation\/tuikit","role":"collection","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","title":"TUIKit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"topic","role":"article","kind":"article","title":"View Modifiers","abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"url":"\/documentation\/tuikit\/modifiers"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"type":"topic","kind":"article","title":"State Management","abstract":[{"text":"Learn how to manage application state and data flow in TUIKit.","type":"text"}],"url":"\/documentation\/tuikit\/statemanagement","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"}}} \ No newline at end of file diff --git a/docs/metadata.json b/docs/metadata.json index 4ce091d..9dcceea 100644 --- a/docs/metadata.json +++ b/docs/metadata.json @@ -1 +1 @@ -{"schemaVersion":{"patch":0,"major":0,"minor":1},"bundleDisplayName":"TUIKit","bundleID":"com.anthropic.tuikit.documentation"} \ No newline at end of file +{"bundleDisplayName":"TUIKit","schemaVersion":{"major":0,"patch":0,"minor":1},"bundleID":"com.anthropic.tuikit.documentation"} \ No newline at end of file