Various fixes polish (#190)

* document metadata field and add JS example

* table format for performance and limits

* Fix icon size

Author: benitav

installation/client-side-setup/define-your-schema.mdx

@@ -22,31 +22,31 @@ Similar functionality exists in the PowerSync [CLI](/usage/tools/cli).
 
 For an example implementation of the client-side schema, see the _Getting Started_ section of the SDK reference for your platform:
 
-### <Icon icon="flutter" iconType="solid" size="24"/> Flutter
+### <Icon icon="flutter" iconType="solid" size={32}/> Flutter
 
 * [1\. Define the Schema](/client-sdk-references/flutter#1-define-the-schema)
 
-### <Icon icon="react" iconType="solid" size="24"/> React Native & Expo
+### <Icon icon="react" iconType="solid" size={32}/> React Native & Expo
 
 * [1\. Define the Schema](/client-sdk-references/react-native-and-expo#1-define-the-schema)
 
-### <Icon icon="js" iconType="solid" size="24"/> JavaScript Web
+### <Icon icon="js" iconType="solid" size={32}/> JavaScript Web
 
 * [1\. Define the Schema](/client-sdk-references/javascript-web#1-define-the-schema)
 
-### <Icon icon="k" iconType="solid" size="24"/> Kotlin Multiplatform
+### <Icon icon="k" iconType="solid" size={32}/> Kotlin Multiplatform
 
 * [1\. Define the Schema](/client-sdk-references/kotlin-multiplatform#1-define-the-schema)
 
-### <Icon icon="swift" iconType="solid" size="24"/> Swift
+### <Icon icon="swift" iconType="solid" size={32}/> Swift
 
 * [1\. Define the Schema](/client-sdk-references/swift#1-define-the-schema)
 
-### <Icon icon="node-js" iconType="solid" size="24"/> Node.js (alpha)
+### <Icon icon="node-js" iconType="solid" size={32}/> Node.js (alpha)
 
 * [1\. Define the Schema](/client-sdk-references/node#1-define-the-schema)
 
-### <Icon icon="microsoft" iconType="solid" size="24"/> .NET (alpha)
+### <Icon icon="microsoft" iconType="solid" size={32}/> .NET (alpha)
 
 * [1\. Define the Schema](/client-sdk-references/dotnet#1-define-the-schema)
 

installation/client-side-setup/instantiate-powersync-database.mdx

@@ -11,31 +11,31 @@ In your client-side app, you can read from and write to the local SQLite databas
 
 For an example implementation of instantiating the client-side database, see the _Getting Started_ section of the client SDK reference for your platform:
 
-### <Icon icon="flutter" iconType="solid" size="24"/> Flutter
+### <Icon icon="flutter" iconType="solid" size={32}/> Flutter
 
 * [2\. Instantiate the PowerSync Database](/client-sdk-references/flutter#2-instantiate-the-powersync-database)
 
-### <Icon icon="react" iconType="solid" size="24"/> React Native & Expo
+### <Icon icon="react" iconType="solid" size={32}/> React Native & Expo
 
 * [2\. Instantiate the PowerSync Database](/client-sdk-references/react-native-and-expo#2-instantiate-the-powersync-database)
 
-### <Icon icon="js" iconType="solid" size="24"/> JavaScript Web
+### <Icon icon="js" iconType="solid" size={32}/> JavaScript Web
 
 * [2\. Instantiate the PowerSync Database](/client-sdk-references/javascript-web#2-instantiate-the-powersync-database)
 
-### <Icon icon="k" iconType="solid" size="24"/> Kotlin Multiplatform
+### <Icon icon="k" iconType="solid" size={32}/> Kotlin Multiplatform
 
 * [2\. Instantiate the PowerSync Database](/client-sdk-references/kotlin-multiplatform#2-instantiate-the-powersync-database)
 
-### <Icon icon="swift" iconType="solid" size="24"/> Swift
+### <Icon icon="swift" iconType="solid" size={32}/> Swift
 
 * [2\. Instantiate the PowerSync Database](/client-sdk-references/swift#2-instantiate-the-powersync-database)
 
-### <Icon icon="node-js" iconType="solid" size="24"/> Node.js (alpha)
+### <Icon icon="node-js" iconType="solid" size={32}/> Node.js (alpha)
 
 * [2\. Instantiate the PowerSync Database](/client-sdk-references/node#2-instantiate-the-powersync-database)
 
-### <Icon icon="microsoft" iconType="solid" size="24"/> .NET (alpha)
+### <Icon icon="microsoft" iconType="solid" size={32}/> .NET (alpha)
 
 * [2\. Instantiate the PowerSync Database](/client-sdk-references/dotnet#2-instantiate-the-powersync-database)
 

installation/client-side-setup/integrating-with-your-backend.mdx

@@ -21,27 +21,27 @@ Accordingly, you must pass a _backend connector_ as an argument when you call `c
 
 For an example implementation of a PowerSync 'backend connector', see the _Getting Started_ section of the SDK reference for your platform:
 
-### <Icon icon="flutter" iconType="solid" size="24"/> Flutter
+### <Icon icon="flutter" iconType="solid" size={32}/> Flutter
 
 * [3\. Integrate with your Backend](/client-sdk-references/flutter#3-integrate-with-your-backend)
 
-### <Icon icon="react" iconType="solid" size="24"/> React Native & Expo
+### <Icon icon="react" iconType="solid" size={32}/> React Native & Expo
 
 * [3\. Integrate with your Backend](/client-sdk-references/react-native-and-expo#3-integrate-with-your-backend)
 
-### <Icon icon="js" iconType="solid" size="24"/> JavaScript Web
+### <Icon icon="js" iconType="solid" size={32}/> JavaScript Web
 
 * [3\. Integrate with your Backend](/client-sdk-references/javascript-web#3-integrate-with-your-backend)
 
-### <Icon icon="node-js" iconType="solid" size="24"/> Node.js (alpha)
+### <Icon icon="node-js" iconType="solid" size={32}/> Node.js (alpha)
 
 * [3\. Integrate with your Backend](/client-sdk-references/node#3-integrate-with-your-backend)
 
-### <Icon icon="k" iconType="solid" size="24"/> Kotlin Multiplatform
+### <Icon icon="k" iconType="solid" size={32}/> Kotlin Multiplatform
 
 * [3\. Integrate with your Backend](/client-sdk-references/kotlin-multiplatform#3-integrate-with-your-backend)
 
-### <Icon icon="swift" iconType="solid" size="24"/> Swift
+### <Icon icon="swift" iconType="solid" size={32}/> Swift
 
 * [3\. Integrate with your Backend](/client-sdk-references/swift#3-integrate-with-your-backend)
 

installation/database-connection.mdx

@@ -19,7 +19,7 @@ This page covers PowerSync Cloud. For self-hosted PowerSync, refer to [this sect
 
 Each database provider has their quirks when it comes to specifying connection details, so we have documented database-specific and provider-specific instructions below:
 
-## <Icon icon="elephant" iconType="solid" size="24"/> Postgres Provider Specifics
+## <Icon icon="elephant" iconType="solid" size={32}/> Postgres Provider Specifics
 
 Select your Postgres hosting provider for steps to connect your newly-created PowerSync instance to your Postgres database:
 <AccordionGroup>
@@ -130,7 +130,7 @@ PowerSync deploys and configures an isolated cloud environment for you, which ca
 </Accordion>
 
 
-## <Icon icon="leaf" iconType="solid" size="24"/> MongoDB Specifics
+## <Icon icon="leaf" iconType="solid" size={32}/> MongoDB Specifics
 
 1. Fill in your connection details from MongoDB:
    1. Copy your cluster's connection string and paste it into the PowerSync instance **URI** field. PowerSync will automatically parse this URI to populate other connection details.
@@ -147,7 +147,7 @@ Also see:
 - [MongoDB Atlas Device Sync Migration Guide](/migration-guides/mongodb-atlas)
 - [MongoDB Setup](/installation/database-setup#mongodb)
 
-## <Icon icon="dolphin" iconType="solid" size="24"/> MySQL (Alpha) Specifics
+## <Icon icon="dolphin" iconType="solid" size={32}/> MySQL (Alpha) Specifics
 
 1. Fill in your connection details from MySQL:
    1. "**Name**" can be any name for the connection.

installation/database-setup.mdx

@@ -9,7 +9,7 @@ Jump to: [Postgres](#postgres) | [MongoDB](#mongodb) | [MySQL](#mysql-alpha)
 import PostgresPowerSyncUser from '/snippets/postgres-powersync-user.mdx';
 import PostgresPowerSyncPublication from '/snippets/postgres-powersync-publication.mdx';
 
-## <Icon icon="elephant" iconType="solid" size="24" /> Postgres
+## <Icon icon="elephant" iconType="solid" size={32} /> Postgres
 
 <Check>
   **Version compatibility**: PowerSync requires Postgres version 11 or greater.
@@ -198,7 +198,7 @@ For other providers and self-hosted databases:
 
 Due to the logical replication requirement, not all Postgres hosting providers are supported. Notably, some "serverless Postgres" providers do not support logical replication, and are therefore not supported by PowerSync yet.
 
-## <Icon icon="leaf" iconType="solid" size="24" /> MongoDB
+## <Icon icon="leaf" iconType="solid" size={32} /> MongoDB
 
 <Check>
   **Version compatibility**: PowerSync requires MongoDB version 6.0 or greater.
@@ -285,7 +285,7 @@ If you need to use private endpoints with MongoDB Atlas, see [Private Endpoints]
 
 For more information on migrating from Atlas Device Sync to PowerSync, see our [migration guide](/migration-guides/mongodb-atlas).
 
-## <Icon icon="dolphin" iconType="solid" size="24" /> MySQL (Alpha)
+## <Icon icon="dolphin" iconType="solid" size={32} /> MySQL (Alpha)
 
 <Info>
   This section is a work in progress. More details for MySQL connections are coming soon. In the meantime, ask on our [Discord server](https://discord.gg/powersync) if you have any questions.

installation/database-setup/security-and-ip-filtering.mdx

@@ -2,7 +2,7 @@
 title: "Security & IP Filtering"
 ---
 
-## <Icon icon="elephant" iconType="solid" size="24"/> TLS with Postgres
+## <Icon icon="elephant" iconType="solid" size={32}/> TLS with Postgres
 
 PowerSync always [enforces TLS](/usage/lifecycle-maintenance/postgres-maintenance#tls) on connections to the database, and certificate validation cannot be disabled.
 

integration-guides/supabase-+-powersync/handling-attachments.mdx

@@ -5,7 +5,7 @@ description: "Examples of syncing attachments between a client app and Supabase
 
 import SupabaseStorage from '/snippets/supabase-storage-config.mdx';
 
-## <Icon icon="react"iconType="solid" size="24"/> React Native Example
+## <Icon icon="react"iconType="solid" size={32}/> React Native Example
 
 Our React Native [To-Do List demo app](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-supabase-todolist) showcases how to sync attachments (such as photos) using the [@powersync/attachments](https://www.npmjs.com/package/@powersync/attachments) library, the PowerSync Service, and Supabase.
 
@@ -80,15 +80,15 @@ The following improvements can be considered for this implementation.
 * An easier way to set up the local-only `attachments` table and related schema.
 * Better tooling/APIs for retrying/resuming uploads or downloads when transitioning from an offline into an online state.
 
-## <Icon icon="flutter"iconType="solid" size="24"/> Flutter Example
+## <Icon icon="flutter"iconType="solid" size={32}/> Flutter Example
 
 Our Flutter [To-Do List demo app](https://github.com/powersync-ja/powersync.dart/tree/master/demos/supabase-todolist) showcases how to sync attachments (such as photos) using our [powersync\_attachments\_helper](https://pub.dev/packages/powersync_attachments_helper) package for Flutter.
 
-## <Icon icon="kotlin"iconType="solid" size="24"/> Kotlin Example
+## <Icon icon="kotlin"iconType="solid" size={32}/> Kotlin Example
 
 Our Kotlin [To-Do List demo app](https://github.com/powersync-ja/powersync-kotlin/tree/main/demos/android-supabase-todolist) showcases how to sync attachments using built-in attachments helpers.
 
-## <Icon icon="swift"iconType="solid" size="24"/> Swift Example
+## <Icon icon="swift"iconType="solid" size={32}/> Swift Example
 
 Our Swift [To-Do List demo app](https://github.com/powersync-ja/powersync-swift/tree/main/Demo) showcases how to sync attachments using built-in attachments helpers.
 

resources/performance-and-limits.mdx

@@ -1,27 +1,39 @@
 ---
 title: "Performance and Limits"
+description: "Expected performance and limits for PowerSync Cloud."
 mode: wide
 ---
 
-The [current Pro and Team plans](https://www.powersync.com/pricing) of PowerSync Cloud have the following limits and expected performance.
-
-The PowerSync Cloud Enterprise plan allows for limits to be customized.
-
-* Number of synced buckets per user: 1,000.
-   * Sync requests where this number is exceeded will fail with a hard error.
-   * We have plans to increase this limit.
-* Maximum row/document size: 15MB
-   * This applies to both the source row/document, and the transformed row synced to the client.
-* Number of concurrent connections per [PowerSync Service](/architecture/powersync-service) instance: Limited to 3,000 by default.
-* Replicated rows/documents (Source database -> PowerSync Service):
-   * Expect a peak of around 2,000-4,000 operations/second for small rows/documents, or 5MB/second for large rows/documents.
-   * This also applies to reprocessing sync rules or adding new tables/collections.
-   * Smaller transactions are processed at around 60 transactions/second.
-* Synced rows (PowerSync Service -> Client):
-   * Over 1M rows per client is supported, with no hard limit.
-   * Expect a rate of around 2,000-20,000 operations/second/client, depending on the client.
-   * Database size and initial sync time may impose practical limits on number of rows.
-* Storage size: A soft limit of 100GB for data stored on the PowerSync Service by default.
-* Number of unique users: No hard limit.
-* Number of tables: No hard limit, but having hundreds of tables may slow down startup and sync performance.
-* Number of columns per table: Hard limit of 1999 columns per table in the client schema, excluding the id column.
+PowerSync Cloud **Pro and Team** plans have the limits and performance expectations outlined below.
+
+The PowerSync Cloud **Enterprise** plan allows these limits to be customized based on your specific needs. 
+
+## Limits
+
+| **Component** | **Limit** | **Details** |
+|---|---|---|
+| **Synced buckets per user** | 1,000 | Sync requests exceeding this will fail with an error. We plan to increase this limit in the future. |
+| **Maximum row/document size** | 15MB | Applies to both source database rows and transformed rows synced to clients. |
+| **Concurrent connections** | 3,000 | Default limit per [PowerSync Service](/architecture/powersync-service) instance. This can be increased upon request. |
+| **Storage size** | 100GB | Soft limit for data stored on PowerSync Service (default). |
+| **Columns per table** | 1,999 | Hard limit of the client schema, excluding the `id` column. |
+| **Number of users** | No limit | No hard limit on unique users. |
+| **Number of tables** | No limit | Hundreds of tables may impact startup and sync performance. |
+
+## Performance Expectations
+
+### Database Replication (Source DB → PowerSync Service)
+
+- **Small rows**: 2,000-4,000 operations per second
+- **Large rows**: Up to 5MB per second
+- **Transaction processing**: ~60 transactions per second for smaller transactions
+- **Reprocessing**: Same rates apply when reprocessing sync rules or adding new tables
+
+### Sync (PowerSync Service → Client)
+
+- **Rows per client**: Over 1 million rows supported with no hard limit
+  - Database size and initial sync time may impose practical limits on the number of rows
+- **Sync speed**: Expect a rate of 2,000-20,000 operations per second per client, depending on the client
+
+
+

usage/lifecycle-maintenance/implementing-schema-changes.mdx

@@ -44,7 +44,7 @@ Nothing in PowerSync will fail hard if there are incompatible schema changes. Bu
 
 To avoid certain types of breaking changes on older clients, Sync Rule [transformations](/usage/sync-rules/data-queries) may be used.
 
-## <Icon icon="elephant" iconType="solid" size="24" /> Postgres Specifics
+## <Icon icon="elephant" iconType="solid" size={32} /> Postgres Specifics
 
 PowerSync keeps the [sync buckets](/usage/sync-rules/organize-data-into-buckets) up to date with any incremental data changes, as recorded in the Postgres [WAL](https://www.postgresql.org/docs/8.0/wal.html) / received in the logical replication stream. This is also referred to as DML (Data Manipulation Language) queries.
 
@@ -128,7 +128,7 @@ There are additional changes that can be made to a table in a publication:
 
 Those changes are not automatically picked up by PowerSync during replication, and can cause PowerSync to miss changes if the changes are filtered out. PowerSync will not automatically recover the data when for example removing a row filter. Use these with caution.
 
-## <Icon icon="leaf" iconType="solid" size="24" /> MongoDB Specifics
+## <Icon icon="leaf" iconType="solid" size={32} /> MongoDB Specifics
 
 Since MongoDB is schemaless, schema changes generally do not impact PowerSync. However, adding, dropping, and renaming collections require special consideration.
 
@@ -149,7 +149,7 @@ Renaming an unsynced collection to a name that is included in the Sync Rules tri
 Circular renames (e.g., renaming `todos` → `todos_old` → `todos`) are not directly supported. To reprocess the database after such changes, a Sync Rules update must be deployed.
 
 
-## <Icon icon="dolphin" iconType="solid" size="24" /> MySQL (Alpha) Specifics
+## <Icon icon="dolphin" iconType="solid" size={32} /> MySQL (Alpha) Specifics
 
 <Info>
   This section is a work in progress. More details for MySQL connections are coming soon. In the meantime, ask on our [Discord server](https://discord.gg/powersync) if you have any questions.

usage/lifecycle-maintenance/upgrading-the-client-sdk.mdx

@@ -2,7 +2,7 @@
 title: "Upgrading the Client SDK"
 ---
 
-## <Icon icon="flutter" iconType="solid" size="24"/> Flutter
+## <Icon icon="flutter" iconType="solid" size={32}/> Flutter
 
 In order to upgrade to a newer version of the PowerSync package, first check the [changelog](https://pub.dev/packages/powersync/changelog) for any breaking changes.
 
@@ -12,7 +12,7 @@ Then, run the below command in your project folder:
 flutter pub upgrade powersync
 ```
 
-## <Icon icon="react" iconType="solid" size="24"/> React Native & Expo
+## <Icon icon="react" iconType="solid" size={32}/> React Native & Expo
 
 Run the below command in your project folder:
 
@@ -35,7 +35,7 @@ pnpm upgrade @powersync/react-native @journeyapps/react-native-quick-sqlite
 </Tabs>
 
 
-## <Icon icon="js" iconType="solid" size="24"/> JavaScript Web
+## <Icon icon="js" iconType="solid" size={32}/> JavaScript Web
 
 Run the below command in your project folder:
 
@@ -57,7 +57,7 @@ pnpm upgrade @powersync/web @journeyapps/wa-sqlite
   </Tab>
 </Tabs>
 
-## <Icon icon="js" iconType="solid" size="24"/> Node.js (alpha)
+## <Icon icon="js" iconType="solid" size={32}/> Node.js (alpha)
 
 Run the below command in your project folder:
 
@@ -79,10 +79,10 @@ Run the below command in your project folder:
 </Tab>
 </Tabs>
 
-## <Icon icon="code" iconType="solid" size="24"/> Kotlin Multiplatform
+## <Icon icon="code" iconType="solid" size={32}/> Kotlin Multiplatform
 
 Update your project's Gradle file (`build.gradle.kts`) with the latest version of the [SDK](https://central.sonatype.com/artifact/com.powersync/core).
 
-## <Icon icon="swift" iconType="solid" size="24"/> Swift
+## <Icon icon="swift" iconType="solid" size={32}/> Swift
 
 Update the version number in `Package.swift` or via Xcode Package Dependencies as documented in the SDK's installation instructions: [Installation](/client-sdk-references/swift#installation)