@astryxdesign/native 0.7.5-canary.577735c → 0.7.5-canary.577e8ca

package/README.md

@@ -132,7 +132,7 @@ pnpm -F @astryxdesign/native typecheck        # source and tests
 pnpm -F @astryxdesign/native build            # dist/, including platform types
 pnpm -F @astryxdesign/native typecheck:types  # every platform's types, after build
 pnpm -F @astryxdesign/native generate:apple   # regenerate apple/Sources/.../Generated
-pnpm -F @astryxdesign/native generate:swift-ios # regenerate the Astryx product's default theme and strings
+pnpm -F @astryxdesign/native generate:swift-ios # regenerate the Astryx product's typed tokens, every published theme, and strings
 pnpm vitest run --project node packages/native
 ```
 

package/apple/README.md

@@ -23,15 +23,15 @@ apple/
 ├── Sources/
 │   ├── Astryx/            # SwiftUI views (module Astryx)
 │   │   ├── Theme/         # tokens, the theme environment, Dynamic Type
-│   │   │   └── Generated/ # core's default theme, generated; do not edit
+│   │   │   └── Generated/ # typed tokens and every published theme, generated; do not edit
 │   │   ├── Resources/     # core's messages per locale, generated; do not edit
 │   │   ├── Localization/
-│   │   ├── Text/          # AstryxText
-│   │   ├── Heading/       # AstryxHeading
-│   │   ├── Button/        # AstryxButton
-│   │   ├── TextInput/     # AstryxTextInput
-│   │   ├── Card/          # AstryxCard
-│   │   └── Banner/        # AstryxBanner
+│   │   ├── Text/          # Text
+│   │   ├── Heading/       # Heading
+│   │   ├── Button/        # Button
+│   │   ├── TextInput/     # TextInput
+│   │   ├── Card/          # Card
+│   │   └── Banner/        # Banner
 │   └── AstryxNative/      # contracts, wire, logic host (module AstryxNative)
 │       └── Generated/     # generated; do not edit
 ├── Tests/
@@ -44,17 +44,21 @@ apple/
 ```
 
 - **`Sources/Astryx/<Name>/`** holds one folder per component, named as in
-  `packages/core/src/<Name>/`. A component's parameters use core's prop names
+  `packages/core/src/<Name>/`. Each view has core's component name in the
+  `Astryx` module (`Button`, `Text`), which re-exports SwiftUI and the
+  generated contracts, so an app file writes `import Astryx` alone. In a file
+  that also imports SwiftUI, write `Astryx.Button` and `SwiftUI.Button`. A
+  component's parameters use core's prop names
   and values (`variant: .primary`, `size: .lg`, `isLoading`), so code reads
   the same across web and native, with six exceptions, the interim shape
   AST-093 FR5 exempts until the components move onto the generated contracts:
-  - `AstryxButton` takes `action` where core has `onClick`.
-  - `AstryxButton` takes `fillsWidth` where core has `width="100%"`.
-  - `AstryxButton` takes `icon` as a shared icon name (`"search"`), which the
+  - `Button` takes `action` where core has `onClick`.
+  - `Button` takes `fillsWidth` where core has `width="100%"`.
+  - `Button` takes `icon` as a shared icon name (`"search"`), which the
     generated `ButtonProps` does not carry yet.
-  - `AstryxTextInput` takes a `Binding` where core has `value` and `onChange`.
-  - `AstryxHeading`'s `level` is optional where core requires it.
-  - `AstryxCard` takes `padding` as a whole spacing step, so it cannot spell
+  - `TextInput` takes a `Binding` where core has `value` and `onChange`.
+  - `Heading`'s `level` is optional where core requires it.
+  - `Card` takes `padding` as a whole spacing step, so it cannot spell
     core's `0.5` and `1.5` steps.
 - **`Templates/`** holds one folder per page template, named after the
   `astryx template` id. Templates are clone-only, as on the web: you copy a
@@ -74,7 +78,6 @@ app.
 
 ```swift
 import Astryx
-import SwiftUI
 
 @main
 struct DemoApp: App {
@@ -93,24 +96,66 @@ size.
 ## Theme tokens
 
 Components read every color, size, and font from the `astryx` environment
-value, never from a constant of their own. Token names are core's, without
-the leading `--` (`color-accent`, `spacing-4`, `size-element-md`). Text sizes
-grow with Dynamic Type.
+value, never from a constant of their own. `astryx.tokens` holds the theme's
+tokens in the current mode as typed members (`tokens.color.textPrimary`,
+`tokens.space.s4`, `tokens.font.bodySize`), so a misspelled token fails to
+compile. Text sizes grow with Dynamic Type. The components still read some
+tokens by core's name (`astryx.color("color-accent")`); moving them onto the
+typed members comes next.
 
 Font families come from the theme's `font-family-*` stacks: the first family
 the device has wins, and a system family such as `-apple-system` or
 `sans-serif` is the system font. Icons use core's shared icon names
 (`success`, `warning`, …), drawn as an SF Symbol by default; a theme replaces
-one with `AstryxTheme(…, icons: ["success": "checkmark.seal.fill"])`.
+one with `Theme(…, icons: ["success": "checkmark.seal.fill"])`.
 
-`Sources/Astryx/Theme/Generated/DefaultTheme.swift` is core's default theme
-run through core's own resolver, light and dark. Regenerate it after a core
-token change:
+`Sources/Astryx/Theme/Generated/` is written by the Swift theme generator
+(`../specs/swift/library/theme-generator.md`) from core's own resolver, light
+and dark:
+
+- `Tokens.swift`: the typed token surface, from core's token names.
+- One `<Name>Theme.swift` per theme, declaring `Theme.<name>`: core's
+  defaults (`.default`) and every published theme package (`.butter`,
+  `.chocolate`, `.gothic`, `.matcha`, `.neutral`, `.stone`, `.y2k`).
+
+```swift
+LoginTemplate().astryxTheme(.neutral)
+```
+
+Regenerate after a theme or core token change:
 
 ```sh
 pnpm -F @astryxdesign/native generate:swift-ios
 ```
 
+A product generates its own theme the same way, from its theme's module and
+export:
+
+```sh
+node packages/native/scripts/swift-ios-theme.mjs --theme ./src/acmeTheme.ts#acmeTheme --out ./Sources/Theme
+```
+
+A theme's local tokens are not generated yet; the generator names each one it
+leaves out.
+
+**Fonts.** A theme's font families are carried as data. Astryx never bundles
+a font: a component walks the theme's family list in order and uses the first
+family the app has registered; a system family in the list (such as
+`-apple-system` or `sans-serif`) is the system font, and a list with no
+registered family falls back to the system font. To draw a theme's brand face, bundle and register it
+in the app. Faces the published themes name (body, heading, code):
+
+| Theme        | Faces to bundle                            |
+| ------------ | ------------------------------------------ |
+| `.default`   | none (system fonts)                        |
+| `.butter`    | Outfit, JetBrains Mono                     |
+| `.chocolate` | Albert Sans, Fraunces, JetBrains Mono      |
+| `.gothic`    | Fustat, JetBrains Mono                     |
+| `.matcha`    | DM Sans, Playwrite US Trad, JetBrains Mono |
+| `.neutral`   | Figtree                                    |
+| `.stone`     | Figtree, Montserrat, JetBrains Mono        |
+| `.y2k`       | Poppins, JetBrains Mono                    |
+
 The same command writes
 `Sources/Astryx/Resources/<locale>.lproj/Localizable.strings` from core's
 locale catalogs, so words the components speak to assistive technology, such
@@ -131,8 +176,9 @@ Both packages also declare macOS 14 so they build and test on a Mac without a
 simulator; iOS 17 is the target. Open `Templates/Package.swift` in Xcode to
 run `LoginTemplate` in an iOS simulator through its preview.
 
-To add a component, create `Sources/Astryx/<Name>/Astryx<Name>.swift` with
-core's prop names, read its tokens from `astryx`, and add tests under
+To add a component, create `Sources/Astryx/<Name>/<Name>.swift` declaring
+`<Name>` with core's prop names, writing `SwiftUI.<Name>` wherever it means the
+system type, read its tokens from `astryx`, and add tests under
 `Tests/AstryxTests/`. To add a template, create
 `Templates/<Name>/<Name>Template.swift` from the output of
 `astryx template <id>`, with tests under `Templates/Tests/`.
@@ -142,5 +188,5 @@ core's prop names, read its tokens from `astryx`, and add tests under
 - The views do not use the generated contract types in `AstryxNative` yet.
   Moving them onto those types is how a core prop change reaches Swift.
 - Pixel and behavior parity with the web components has not been measured.
-- Only the default theme is generated; named themes, Increase Contrast, and
-  platform theme entries (`defineNativeTheme`) are not wired in.
+- Increase Contrast, theme-local tokens, and platform theme entries
+  (`defineNativeTheme`, reserved as `Theme.native`) are not wired in.

package/apple/Sources/Astryx/Banner/{AstryxBanner.swift → Banner.swift}

@@ -35,7 +35,7 @@ public enum AstryxBannerStatus: String, CaseIterable, Sendable {
 /// A message about the page or a section of it. The status sets the color
 /// and icon only; the title must say what happened, because the icon is
 /// decorative to VoiceOver.
-public struct AstryxBanner: View {
+public struct Banner: View {
   let status: AstryxBannerStatus
   let title: String
   let description: String?
@@ -57,9 +57,9 @@ public struct AstryxBanner: View {
           .accessibilityHidden(true)
       }
       VStack(alignment: .leading, spacing: astryx.space(1)) {
-        AstryxText(title, weight: .semibold)
+        Text(title, weight: .semibold)
         if let description {
-          AstryxText(description, color: .secondary)
+          Text(description, color: .secondary)
         }
       }
       .frame(maxWidth: .infinity, alignment: .leading)
@@ -70,7 +70,7 @@ public struct AstryxBanner: View {
         .fill(astryx.color(status.groundToken))
     )
     .accessibilityElement(children: .ignore)
-    .accessibilityLabel(Text(accessibilityText))
+    .accessibilityLabel(SwiftUI.Text(accessibilityText))
   }
 
   /// What VoiceOver reads: the title, then the description.

package/apple/Sources/Astryx/Button/{AstryxButton.swift → Button.swift}

@@ -29,7 +29,7 @@ public enum AstryxButtonSize: String, CaseIterable, Sendable {
 
 /// A labeled action, painted with the theme's tokens. The tap area reaches
 /// the platform's 44-by-44-point minimum even when the drawn button is smaller.
-public struct AstryxButton: View {
+public struct Button: View {
   let label: String
   let variant: AstryxButtonVariant
   let size: AstryxButtonSize
@@ -66,14 +66,14 @@ public struct AstryxButton: View {
   }
 
   public var body: some View {
-    Button(action: activate) {
+    SwiftUI.Button(action: activate) {
       // The label keeps its place while loading so the width holds; the
       // spinner draws over it.
       HStack(spacing: astryx.space(2)) {
         if let icon, let symbol = astryx.icon(icon) {
           Image(systemName: symbol)
         }
-        Text(label).lineLimit(1)
+        SwiftUI.Text(label).lineLimit(1)
       }
       .opacity(isLoading ? 0 : 1)
       .overlay {
@@ -94,9 +94,9 @@ public struct AstryxButton: View {
     // As core's Button: a loading button stays undimmed and focusable, keeps
     // its label, and says Loading; taps do nothing until it finishes.
     .disabled(isDisabled)
-    .accessibilityLabel(Text(accessibilityText))
+    .accessibilityLabel(SwiftUI.Text(accessibilityText))
     .accessibilityAddTraits(Self.accessibilityTraits)
-    .accessibilityValue(Text(loadingValue ?? ""))
+    .accessibilityValue(SwiftUI.Text(loadingValue ?? ""))
     .onChange(of: isLoading) { _, loading in
       if loading { AccessibilityNotification.Announcement(AstryxStrings.buttonLoading).post() }
     }

package/apple/Sources/Astryx/Card/{AstryxCard.swift → Card.swift}

@@ -4,7 +4,7 @@ import SwiftUI
 
 /// A card: one independent item on the theme's card ground, with a hairline
 /// border and the container radius.
-public struct AstryxCard<Content: View>: View {
+public struct Card<Content: View>: View {
   let padding: Int
   let content: Content
   @Environment(\.astryx) private var astryx

package/apple/Sources/Astryx/Exports.swift

@@ -0,0 +1,8 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+// `import Astryx` is the only import an app file needs: it brings SwiftUI and
+// the generated contracts with it. In a file that imports only Astryx, a name
+// Astryx shares with SwiftUI (`Button`, `Text`) means Astryx's view, and
+// `SwiftUI.Button` names the system one (Swift component API spec, A1, A1a).
+@_exported import AstryxNative
+@_exported import SwiftUI

package/apple/Sources/Astryx/Heading/{AstryxHeading.swift → Heading.swift}

@@ -5,7 +5,7 @@ import SwiftUI
 
 /// A heading at levels 1 through 6, painted with the theme's heading tokens
 /// and exposed to VoiceOver as a heading.
-public struct AstryxHeading: View {
+public struct Heading: View {
   let content: String
   let level: Int
   @Environment(\.astryx) private var astryx
@@ -16,7 +16,7 @@ public struct AstryxHeading: View {
   }
 
   public var body: some View {
-    Text(content)
+    SwiftUI.Text(content)
       .font(
         astryx.font(
           size: "text-heading-\(level)-size",

package/apple/Sources/Astryx/Text/{AstryxText.swift → Text.swift}

@@ -51,7 +51,7 @@ public enum AstryxTextSize: String, CaseIterable, Sendable {
 }
 
 /// A run of text in a semantic type, painted with the theme's type tokens.
-public struct AstryxText: View {
+public struct Text: View {
   let content: String
   let type: AstryxTextType
   let color: AstryxTextColor?
@@ -76,7 +76,7 @@ public struct AstryxText: View {
   public var body: some View {
     let sizeToken = size?.token ?? "\(type.token)-size"
     let weightToken = weight?.token ?? "\(type.token)-weight"
-    Text(content)
+    SwiftUI.Text(content)
       .font(astryx.font(size: sizeToken, 14, weight: weightToken))
       .foregroundStyle(astryx.color((color ?? type.defaultColor).token))
   }

package/apple/Sources/Astryx/TextInput/{AstryxTextInput.swift → TextInput.swift}

@@ -12,7 +12,7 @@ public enum AstryxTextInputType: String, CaseIterable, Sendable {
 
 /// A labeled one-line text field, painted with the theme's tokens. The label
 /// stays visible above the field and is the field's accessibility label.
-public struct AstryxTextInput: View {
+public struct TextInput: View {
   let label: String
   @Binding var value: String
   let type: AstryxTextInputType
@@ -39,7 +39,7 @@ public struct AstryxTextInput: View {
 
   public var body: some View {
     VStack(alignment: .leading, spacing: astryx.space(1)) {
-      AstryxText(label, type: .label, color: .secondary)
+      Text(label, type: .label, color: .secondary)
         .accessibilityHidden(true)
       field
         .font(astryx.font(size: "text-body-size", 14, weight: "text-body-weight"))
@@ -52,7 +52,7 @@ public struct AstryxTextInput: View {
         )
         .disabled(isDisabled)
         .opacity(isDisabled ? 0.5 : 1)
-        .accessibilityLabel(Text(accessibilityText))
+        .accessibilityLabel(SwiftUI.Text(accessibilityText))
     }
   }
 
@@ -61,7 +61,7 @@ public struct AstryxTextInput: View {
   var accessibilityText: String { label }
 
   @ViewBuilder private var field: some View {
-    let prompt = placeholder.map { Text($0).foregroundStyle(astryx.color("color-text-secondary")) }
+    let prompt = placeholder.map { SwiftUI.Text($0).foregroundStyle(astryx.color("color-text-secondary")) }
     switch type {
     case .password:
       SecureField("", text: $value, prompt: prompt)

package/apple/Sources/Astryx/Theme/AstryxIcons.swift

@@ -3,7 +3,7 @@
 /// The SF Symbol each of Astryx's built-in icon names draws by default on
 /// Apple platforms (AST-082 FR17). A test keeps this map equal to
 /// `NATIVE_ICON_DEFAULTS` in `@astryxdesign/native`; a theme replaces any
-/// entry through `AstryxTheme(icons:)`.
+/// entry through `Theme(icons:)`.
 let astryxDefaultIcons: [String: String] = [
   "close": "xmark",
   "chevronDown": "chevron.down",