### Host callback example

Source: https://glyph.premex.se/llms-full.txt

Example of using hostAction for a clickable element.

```kotlin
RemoteBox(modifier = RemoteModifier.clickable(hostAction("purchase".rs))) {
    RemoteText("Purchase")
}

```

--------------------------------

### Wiring the SDK with Consumer Key

Source: https://glyph.premex.se/llms-full.txt

Example of installing the SDK with a consumer key in an Android Application class.

```kotlin
class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        RemoteComposeClient.install(
            context     = this,
            consumerKey = BuildConfig.GLYPH_CONSUMER_KEY,  // or fetch from Keystore, server, etc.
        )
    }
}

```

--------------------------------

### GET manifest.json

Source: https://glyph.premex.se/llms-full.txt

Example request to fetch the app manifest.

```http
GET /v1/apps/{appId}/manifest.json HTTP/1.1
Host: glyph.premex.se
X-Consumer-Key: rcc_SchmAFROp_...
```

--------------------------------

### In-document state example

Source: https://glyph.premex.se/llms-full.txt

Example demonstrating in-document state mutation with ValueChange and animation.

```kotlin
val visibility = rememberMutableRemoteInt(0)
val opacity = animateRemoteFloat(rf = visibility.toRemoteFloat(), duration = 0.3f)

// alpha11+ : feed the eased float into the new ".alpha(RemoteFloat)"
// modifier and the text literally fades — the player handles the
// interpolation, the host never sees the tap.
RemoteText(
    text = "now you see me".rs,
    modifier = RemoteModifier
        .alpha(opacity)
        .clickable(ValueChange(visibility, (visibility + 1) % 2)),
)

```

--------------------------------

### GET screen.rc

Source: https://glyph.premex.se/llms-full.txt

Example request to fetch screen bytes with conditional GET.

```http
GET /v1/apps/{appId}/screens/{screenId}.rc HTTP/1.1
Host: glyph.premex.se
If-None-Match: "sha256:..."
X-Consumer-Key: rcc_SchmAFROp_...
```

--------------------------------

### Checkout Screen Example

Source: https://glyph.premex.se/llms-full.txt

An example of a `@RemoteScreen` composable function for a checkout screen, demonstrating layout primitives, modifiers, and click actions.

```kotlin
@RemoteScreen("checkout")
@Composable
fun checkout(
    userName: RemoteString = "guest".rs,
    totalAmount: RemoteFloat = 0f.rf,
) {
    RemoteBox(modifier = RemoteModifier.fillMaxWidth().padding(24.rdp)) {
        RemoteColumn {
            RemoteText("Hi, ".rs + userName, fontSize = 22.rsp, fontWeight = FontWeight.Bold)
            RemoteText("Total: ".rs + totalAmount.toRemoteString(), fontSize = 16.rsp)
            RemoteSpacer()
            RemoteBox(
                modifier = RemoteModifier
                    .fillMaxWidth()
                    .padding(top = 8.rdp)
                    .clickable(hostAction("purchase".rs)),
            ) {
                RemoteText("Purchase", fontSize = 18.rsp, color = RemoteColor(Color(0xFF4F46E5)))
            }
            RemoteBox(
                modifier = RemoteModifier
                    .fillMaxWidth()
                    .padding(top = 8.rdp)
                    .clickable(hostAction("cancel".rs)),
            ) {
                RemoteText("Cancel", fontSize = 16.rsp)
            }
        }
    }
}
```

--------------------------------

### Greeting Screen Example

Source: https://glyph.premex.se/llms-full.txt

An example of a `@RemoteScreen` composable function for a greeting screen, showcasing typed parameters with `RemoteString`.

```kotlin
@RemoteScreen("greeting")
@Composable
fun greeting(name: RemoteString = "world".rs) {
    RemoteText("Hello, ".rs + name)
}
```

--------------------------------

### Render App Composable

Source: https://glyph.premex.se/llms-full.txt

Example of rendering the App composable with Glyph.Checkout.

```kotlin
import com.example.app.glyph.Glyph

@Composable
fun App() {
    Glyph.Checkout(
        userName    = "Stefan",
        totalAmount = 49.99f,
        callbacks   = object : Glyph.CheckoutCallbacks {
            override fun onPurchase() { /* … */ }
            override fun onCancel()   { /* … */ }
        },
        modifier = Modifier.fillMaxSize(),
    )
}

```

--------------------------------

### Consumer Build Configuration

Source: https://glyph.premex.se/llms-full.txt

Example `build.gradle.kts` configuration for a consumer application, including necessary plugins and Glyph plugin configuration.

```kotlin
// app/build.gradle.kts
plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.plugin.compose")
    id("se.premex.glyph") version "0.3.5"
}

glyph {
    appId            = "your-app-id"
    generatedPackage = "com.example.app.glyph"   // pick a package you own
}
```

--------------------------------

### Consumer side callback routing

Source: https://glyph.premex.se/llms-full.txt

Example of how the consumer side routes callbacks.

```kotlin
Glyph.Checkout(
    userName    = "Stefan",
    totalAmount = 49.99f,
    callbacks   = object : Glyph.CheckoutCallbacks {
        override fun onPurchase() { /* … */ }
        override fun onCancel()   { /* … */ }
    },
)

```

--------------------------------

### Toggle Screen Example

Source: https://glyph.premex.se/llms-full.txt

An example of a `@RemoteScreen` composable function for a toggle screen, demonstrating in-document state management (`rememberMutableRemoteInt`) and animations (`animateRemoteFloat`) with `alpha` modifier.

```kotlin
@RemoteScreen("toggle")
@Composable
fun toggle() {
    val visibility = rememberMutableRemoteInt(0)
    val opacity = animateRemoteFloat(rf = visibility.toRemoteFloat(), duration = 0.3f)

    // alpha11 added the .alpha(RemoteFloat) modifier — the text fades in
    // and out of view as the eased float swings between 0 and 1, with no
    // host round-trip on the tap.
    RemoteText(
        text = "now you see me".rs,
        modifier = RemoteModifier
            .alpha(opacity)
            .clickable(ValueChange(visibility, (visibility + 1) % 2)),
    )
}
```

--------------------------------

### Live test curl

Source: https://glyph.premex.se/llms-full.txt

Example curl command to test fetching the manifest.

```sh
curl https://glyph.premex.se/v1/apps/quick-wave-7982/manifest.json
```

--------------------------------

### Modifier Example

Source: https://glyph.premex.se/llms-full.txt

An example demonstrating the usage of `RemoteModifier` with common modifiers like `fillMaxWidth`, `padding`, `background`, and `clickable`.

```kotlin
RemoteModifier
    .fillMaxWidth()
    .padding(top = 8.rdp)
    .background(RemoteColor(Color.White))
    .clickable(hostAction("submit".rs))
```

--------------------------------

### Web Player Initialization

Source: https://glyph.premex.se/llms-full.txt

Example of embedding and initializing the Glyph web player using a script tag and JavaScript.

```html
<script src="https://glyph.premex.se/rc-player/bundle.js"></script>
<script>
  const handle = RC.createPlayer(document.getElementById("host"), {
    src: "/v1/apps/your-app-id/screens/checkout.rc",
    width: 360,
    height: 640,
    theme: "light",
  });
  // Push slot values at runtime:
  handle.player.remoteContext.setNamedStringOverride("userName", "Stefan");
  handle.player.scheduleRepaint();
</script>
```

--------------------------------

### Checkout Screen

Source: https://glyph.premex.se/llms-full.txt

Example of a composable function defining a checkout screen with remote UI elements.

```kotlin
@file:OptIn(androidx.compose.remote.creation.compose.ExperimentalRemoteCreationComposeApi::class)
@file:Suppress("RestrictedApi")

package com.example.app.screens

import androidx.compose.remote.creation.compose.action.hostAction
import androidx.compose.remote.creation.compose.layout.RemoteBox
import androidx.compose.remote.creation.compose.layout.RemoteColumn
import androidx.compose.remote.creation.compose.layout.RemoteText
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.clickable
import androidx.compose.remote.creation.compose.modifier.fillMaxWidth
import androidx.compose.remote.creation.compose.modifier.padding
import androidx.compose.remote.creation.compose.state.RemoteFloat
import androidx.compose.remote.creation.compose.state.RemoteString
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rf
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.remote.creation.compose.state.rsp
import androidx.compose.runtime.Composable
import se.premex.glyph.runtime.RemoteScreen

@RemoteScreen("checkout")
@Composable
fun checkout(
    userName: RemoteString = "guest".rs,
    totalAmount: RemoteFloat = 0f.rf,
) {
    RemoteBox(modifier = RemoteModifier.fillMaxWidth().padding(24.rdp)) {
        RemoteColumn {
            RemoteText("Hi, ".rs + userName, fontSize = 22.rsp)
            RemoteText("Total: ".rs + totalAmount.toRemoteString(), fontSize = 16.rsp)
            RemoteBox(
                modifier = RemoteModifier
                    .fillMaxWidth()
                    .padding(top = 8.rdp)
                    .clickable(hostAction("purchase".rs)),
            ) {
                RemoteText("Purchase", fontSize = 18.rsp)
            }
            RemoteBox(
                modifier = RemoteModifier
                    .fillMaxWidth()
                    .padding(top = 8.rdp)
                    .clickable(hostAction("cancel".rs)),
            ) {
                RemoteText("Cancel", fontSize = 16.rsp)
            }
        }
    }
}

```

--------------------------------

### Render Screen in Consumer App

Source: https://glyph.premex.se/llms-full.txt

Example of rendering a remote screen (Checkout) in a consumer Android application.

```kotlin
import com.example.app.glyph.Glyph   // matches `generatedPackage`

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        RemoteComposeClient.install(context = this)
    }
}

@Composable
fun App() {
    Glyph.Checkout(
        userName    = "Stefan",
        totalAmount = 49.99f,
        callbacks   = object : Glyph.CheckoutCallbacks {
            override fun onPurchase() { /* navigate */ }
            override fun onCancel()   { /* navigate */ }
        },
        modifier = Modifier.fillMaxSize(),
    )
}

```

--------------------------------

### String concatenation with slots

Source: https://glyph.premex.se/llms-full.txt

Examples of string concatenation with different Remote types.

```kotlin
RemoteText("Hi, ".rs + userName)                  // RemoteString + RemoteString
RemoteText("Total: ".rs + totalAmount.toRemoteString())
RemoteText(userName + " owes ".rs + totalAmount.toRemoteString())

```

--------------------------------

### iOS Swift Package Manager Integration

Source: https://glyph.premex.se/llms-full.txt

Example of integrating Glyph into an iOS application using Swift Package Manager and rendering a Glyph screen.

```swift
import Glyph

@main struct MyApp: App {
    init() {
        GlyphClient.configure(appId: "your-app-id")
    }
    var body: some Scene {
        WindowGroup {
            GlyphScreen(
                screenID: "compose-checkout",
                params: ["userName": "Stefan", "totalAmount": Float(49.99)],
                onAction: { id in /* … */ }
            )
        }
    }
}
```

--------------------------------

### Consumer pushes values via the typed accessor

Source: https://glyph.premex.se/llms-full.txt

Example of how a consumer pushes values to the typed accessor.

```kotlin
Glyph.Checkout(userName = "Stefan", totalAmount = 49.99f, callbacks = ...)

```

--------------------------------

### Declare typed slots on the screen function

Source: https://glyph.premex.se/llms-full.txt

Example of declaring typed slots for the checkout screen.

```kotlin
@RemoteScreen("checkout")
@Composable
fun checkout(
    userName: RemoteString = "guest".rs,
    totalAmount: RemoteFloat = 0f.rf,
    accent: RemoteColor = RemoteColor(Color.Blue),
) {
    RemoteText("Hi, ".rs + userName, color = accent)
    RemoteText("Total: ".rs + totalAmount.toRemoteString())
}

```

--------------------------------

### settings.gradle.kts

Source: https://glyph.premex.se/llms-full.txt

Configuration for settings.gradle.kts to include Glyph repositories and the Foojay toolchain resolver.

```kotlin
pluginManagement {
    repositories {
        maven { url = uri("https://artifacts.premex.se/api/maven/premex/glyph/") }
        gradlePluginPortal()
    }
}

dependencyResolutionManagement {
    repositories {
        maven { url = uri("https://artifacts.premex.se/api/maven/premex/glyph/") }
        google()
        mavenCentral()
    }
}

// Foojay resolves the JDK 21 toolchain Glyph requires (see below).
plugins {
    id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0"
}
```

--------------------------------

### Sync the manifest

Source: https://glyph.premex.se/llms-full.txt

Command to sync the glyph manifest.

```sh
./gradlew :app:glyphSync

```

--------------------------------

### screens/build.gradle.kts

Source: https://glyph.premex.se/llms-full.txt

Configuration for the authoring module's build.gradle.kts, including Glyph plugin, app ID, API key, generated package, Android settings, and Kotlin JVM toolchain.

```kotlin
plugins {
    id("com.android.library")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.plugin.compose")    // REQUIRED — see note
    id("se.premex.glyph") version "0.3.5"
}

glyph {
    appId            = "your-app-id"
    apiKey           = providers.environmentVariable("GLYPH_API_KEY")
    generatedPackage = "com.example.app.glyph"   // pick a package you own
}

android {
    namespace = "com.example.app.screens"
    compileSdk = 37
    defaultConfig { minSdk = 29 }                // Glyph needs ≥ 29
    testOptions { unitTests { isIncludeAndroidResources = true } }
}

kotlin {
    jvmToolchain(21)                             // Glyph needs JDK 21
}
```

--------------------------------

### Consumer App Gradle Configuration

Source: https://glyph.premex.se/llms-full.txt

Gradle configuration for a consumer Android app, including the Glyph plugin.

```kotlin
plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.plugin.compose")
    id("se.premex.glyph") version "0.3.5"
}

glyph {
    appId            = "your-app-id"
    generatedPackage = "com.example.app.glyph"   // pick a package you own
}

android {
    defaultConfig { minSdk = 29 }
}

kotlin {
    jvmToolchain(21)
}

```

--------------------------------

### Publish Command

Source: https://glyph.premex.se/llms-full.txt

Command to publish screens using the Glyph CLI.

```sh
GLYPH_API_KEY=rck_... ./gradlew :screens:glyphPublish
```

--------------------------------

### Sync Manifest Command

Source: https://glyph.premex.se/llms-full.txt

Command to sync the Glyph manifest in the consumer app.

```sh
./gradlew :app:glyphSync
```

--------------------------------

### Android Gradle Plugin Configuration

Source: https://glyph.premex.se/llms-full.txt

Configuration for the Glyph plugin in an Android project's build.gradle file.

```kotlin
plugins {
    id("se.premex.glyph") version "0.3.5"
    // …
}

glyph {
    appId = "your-app-id"
    generatedPackage = "com.example.app.glyph"
}
```

--------------------------------

### Manifest shape JSON

Source: https://glyph.premex.se/llms-full.txt

JSON structure of the app manifest.

```json
{
  "schemaVersion": 1,
  "appId":   "your-app-id",
  "generatedAt": 1730000000000,
  "screens": [
    {
      "id":        "checkout",
      "version":   3,
      "sizeBytes": 726,
      "etag":      "\"sha256:abc...\"",
      "hash":      "abc...",
      "rcUrl":     "/v1/apps/your-app-id/screens/checkout.rc",
      "previewUrl":"/v1/apps/your-app-id/screens/checkout/preview.png",
      "dimensions": { "width": 360, "height": 640 },
      "contract":  { "actions": [...], "params": [...] },
      "prefetchOnLaunch": false,
      "updatedAt": 1730000000000
    }
  ]
}
```

--------------------------------

### Android Composable for Glyph Screen

Source: https://glyph.premex.se/llms-full.txt

A Jetpack Compose Composable function to render a Glyph screen, demonstrating how to pass parameters and handle callbacks.

```kotlin
import com.example.app.glyph.Glyph

@Composable
fun App() {
    Glyph.Checkout(
        userName = "Stefan",
        totalAmount = 49.99f,
        callbacks = object : Glyph.CheckoutCallbacks {
            override fun onPurchase() { /* … */ }
            override fun onCancel()   { /* … */ }
        },
    )
}
```

--------------------------------

### Upload payload JSON

Source: https://glyph.premex.se/llms-full.txt

JSON structure for uploading screen data.

```json
{
  "rcBase64": "...",
  "contract": {
    "actions": ["purchase", "cancel"],
    "params":  [{ "id": "userName", "type": "string" }]
  },
  "previewBase64": "...",
  "dimensions": { "width": 360, "height": 640 }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.