Publish Sage app SDK through trusted npm CI

.github/workflows/npm.yml

@@ -0,0 +1,85 @@
+name: NPM
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '**'
+
+  pull_request:
+    branches:
+      - '**'
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  validate:
+    name: Validate package
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+          package-manager-cache: false
+
+      - name: Install supported npm
+        run: npm install --global npm@11.19.0
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Check formatting
+        run: pnpm prettier:check
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Dry-run package
+        working-directory: packages/sage-app-sdk
+        run: npm pack --dry-run
+
+  publish:
+    name: Publish to npm
+    if: startsWith(github.ref, 'refs/tags/')
+    needs: validate
+    runs-on: ubuntu-latest
+    environment: npm
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+          package-manager-cache: false
+
+      - name: Install supported npm
+        run: npm install --global npm@11.19.0
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish
+        working-directory: packages/sage-app-sdk
+        run: npm publish

builtin-apps/src/system/apps/app-install/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { formatSageError, getSageSystemClient } from '@sage-system-app/sdk';
+import { formatSageError, getSageSystemClient } from 'sage-system-app-sdk';
 import { previewUrl } from './api';
 import { ErrorState } from './components/ErrorState';
 import { LoadingState } from './components/LoadingState';

builtin-apps/src/system/apps/app-install/src/api.ts

@@ -3,7 +3,7 @@ import {
   type SageGrantedPermissionsInput,
   type SageAppWalletScope,
   type WalletListWalletsResult,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import type { InstallSource } from './types';
 
 export async function closeSelf() {

builtin-apps/src/system/apps/app-install/src/components/ErrorState.tsx

@@ -1,4 +1,4 @@
-import { AppModalShell } from '@sage-app/ui';
+import { AppModalShell } from 'sage-app-ui';
 
 export function ErrorState({ error }: { error: string }) {
   return (

builtin-apps/src/system/apps/app-install/src/components/LoadingState.tsx

@@ -1,4 +1,4 @@
-import { AppModalShell } from '@sage-app/ui';
+import { AppModalShell } from 'sage-app-ui';
 
 export function LoadingState() {
   return (

builtin-apps/src/system/apps/app-install/src/components/ReviewInstallView.tsx

@@ -3,14 +3,14 @@ import {
   AppModalShell,
   AppPermissionEditor,
   WalletScopeEditor,
-} from '@sage-app/ui';
+} from 'sage-app-ui';
 import {
   formatSageError,
   type SageAppCapabilityDefinitionView,
   type SageAppWalletScope,
   type SageGrantedPermissionsInput,
   type SystemWalletView,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import { closeSelf, installSource, listWallets } from '../api';
 import type { InstallSource } from '../types';
 import { resolveInstallIcon } from '../utils/icons';

builtin-apps/src/system/apps/app-install/src/components/SelectSourceView.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { SystemModalShell } from '@sage-app/ui';
-import { formatSageError } from '@sage-system-app/sdk';
+import { SystemModalShell } from 'sage-app-ui';
+import { formatSageError } from 'sage-system-app-sdk';
 import { closeSelf, previewUrl, selectAndPreviewZip } from '../api';
 import type { InstallSource } from '../types';
 

builtin-apps/src/system/apps/app-install/src/components/UnsupportedManifestView.tsx

@@ -1,4 +1,4 @@
-import { AppModalShell } from '@sage-app/ui';
+import { AppModalShell } from 'sage-app-ui';
 import { closeSelf } from '../api';
 import type { InstallSource } from '../types';
 

builtin-apps/src/system/apps/app-install/src/styles.css

@@ -1,4 +1,4 @@
-@import '@sage-app/sdk/theme.css';
+@import 'sage-app-sdk/theme.css';
 @config "../tailwind.config.js";
 
 @tailwind base;

builtin-apps/src/system/apps/app-install/src/types.ts

@@ -2,7 +2,7 @@ import type {
   SageAppCapabilityDefinitionView,
   SageAppPackageManifest,
   SageAppUrlPreview,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 
 export type InstallSource =
   | { kind: 'zip'; zipPath: string; manifest: SageAppPackageManifest }

builtin-apps/src/system/apps/app-install/src/utils/format.ts

@@ -1,4 +1,4 @@
-import type { SageAppPackageManifest } from '@sage-system-app/sdk';
+import type { SageAppPackageManifest } from 'sage-system-app-sdk';
 
 export function formatBytes(bytes: number): string {
   if (!Number.isFinite(bytes) || bytes < 0) return 'Unknown';

builtin-apps/src/system/apps/app-install/src/utils/icons.ts

@@ -1,4 +1,4 @@
-import type { AppIcon } from '@sage-app/ui';
+import type { AppIcon } from 'sage-app-ui';
 import type { InstallSource } from '../types';
 
 export function resolveInstallIcon(source: InstallSource): AppIcon | null {

builtin-apps/src/system/apps/app-install/src/utils/permissions.ts

@@ -2,13 +2,13 @@ import {
   emptyGrantedPermissionsInput,
   initialGrantedPermissionsInput,
   inputToGrantedPermissionsView,
-} from '@sage-app/ui';
+} from 'sage-app-ui';
 import type {
   SageAppCapabilityDefinitionView,
   SageAppPackageManifest,
   SageGrantedPermissionsInput,
   UserSageAppView,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import type { InstallSource } from '../types';
 
 export const emptyGrantedPermissions = emptyGrantedPermissionsInput;

builtin-apps/src/system/apps/app-update/src/App.tsx

@@ -1,8 +1,8 @@
-import { SystemModalShell } from '@sage-app/ui';
+import { SystemModalShell } from 'sage-app-ui';
 import { useLoadState } from './hooks/useLoadState';
 import { UpdateReviewBody } from './components/UpdateReviewBody';
 import { PermissionsReviewBody } from './components/PermissionsReviewBody';
-import { useSageSystemClient } from '@sage-system-app/sdk';
+import { useSageSystemClient } from 'sage-system-app-sdk';
 
 export function App() {
   const sage = useSageSystemClient();

builtin-apps/src/system/apps/app-update/src/components/PermissionsReviewBody.tsx

@@ -5,13 +5,13 @@ import {
   AppPermissionEditor,
   inputToGrantedPermissionsView,
   WalletScopeEditor,
-} from '@sage-app/ui';
+} from 'sage-app-ui';
 import {
   formatSageError,
   getSageSystemClient,
   type SageAppWalletScope,
   type SageGrantedPermissionsInput,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import type { LoadState } from '../types';
 
 type PermissionsReadyState = Extract<LoadState, { kind: 'ready' }>;

builtin-apps/src/system/apps/app-update/src/components/UpdateReviewBody.tsx

@@ -3,12 +3,12 @@ import {
   appIconFromCommonView,
   AppModalShell,
   UpdateDecisionPermissionEditor,
-} from '@sage-app/ui';
+} from 'sage-app-ui';
 import {
   formatSageError,
   getSageSystemClient,
   type SageGrantedPermissionsInput,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import { NoUpdateBody } from './NoUpdateBody';
 import { PartialUpdateBody } from './PartialUpdateBody';
 

builtin-apps/src/system/apps/app-update/src/hooks/useLoadState.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { formatSageError, useSageSystemClient } from '@sage-system-app/sdk';
+import { formatSageError, useSageSystemClient } from 'sage-system-app-sdk';
 import type { LoadState, Mode } from '../types';
 
 export function useLoadState() {

builtin-apps/src/system/apps/app-update/src/hooks/useUpdatePermissions.ts

@@ -4,7 +4,7 @@ import type {
   SageAppCapabilityDefinitionView,
   SageGrantedPermissionsInput,
   UserSageAppView,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import { definitionMap } from '../utils/definitions';
 import { nextPermissionsForUpdate } from '../utils/permissions';
 

builtin-apps/src/system/apps/app-update/src/styles.css

@@ -1,4 +1,4 @@
-@import '@sage-app/sdk/theme.css';
+@import 'sage-app-sdk/theme.css';
 @config "../tailwind.config.js";
 
 @tailwind base;

builtin-apps/src/system/apps/app-update/src/types.ts

@@ -4,7 +4,7 @@ import type {
   SageAppCapabilityDefinitionView,
   SystemWalletView,
   UserSageAppView,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 
 export type Mode = 'review-update' | 'review-permissions';
 

builtin-apps/src/system/apps/app-update/src/utils/definitions.ts

@@ -1,7 +1,7 @@
 import type {
   SageAppCapabilityDefinitionView,
   UserBridgeCapability,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 
 export function definitionMap(definitions: SageAppCapabilityDefinitionView[]) {
   return new Map(definitions.map((d) => [d.key as UserBridgeCapability, d]));

builtin-apps/src/system/apps/app-update/src/utils/permissions.ts

@@ -2,7 +2,7 @@ import type {
   SageGrantedPermissionsView,
   SageNetworkWhitelistEntry,
   UserBridgeCapability,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import { isUserGrantable } from './definitions';
 
 type RequestedWhitelistByNetwork = Record<

builtin-apps/src/system/apps/bridge-approval/package.json

@@ -3,6 +3,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@sage-system-app/sdk": "workspace:*"
+    "sage-system-app-sdk": "workspace:*"
   }
 }

builtin-apps/src/system/apps/bridge-approval/src/App.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { AppIcon, appIconFromCommonView, AppModalShell } from '@sage-app/ui';
+import { AppIcon, appIconFromCommonView, AppModalShell } from 'sage-app-ui';
 import {
   useSageSystemClient,
   type PendingBridgeApprovalView,
   type SageAppRuntimeRecordView,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import { Clock } from 'lucide-react';
 import { AppApprovalBody } from './approval/AppApprovalBody';
 

builtin-apps/src/system/apps/bridge-approval/src/approval/AppApprovalBody.tsx

@@ -1,4 +1,4 @@
-import type { RustBridgeApprovalRequest } from '@sage-system-app/sdk';
+import type { RustBridgeApprovalRequest } from 'sage-system-app-sdk';
 import { CapabilityGrantApprovalCard } from './CapabilityGrantApprovalCard';
 import { GetSecretKeyApprovalCard } from './GetSecretKeyApprovalCard';
 import { NetworkWhitelistGrantApprovalCard } from './NetworkWhitelistGrantApprovalCard';

builtin-apps/src/system/apps/bridge-approval/src/approval/CapabilityGrantApprovalCard.tsx

@@ -1,4 +1,4 @@
-import type { RustBridgeApprovalRequest } from '@sage-system-app/sdk';
+import type { RustBridgeApprovalRequest } from 'sage-system-app-sdk';
 import { ApprovalDetailRow } from './shared';
 
 interface Props {

builtin-apps/src/system/apps/bridge-approval/src/approval/GetSecretKeyApprovalCard.tsx

@@ -1,5 +1,5 @@
 import { Wallet } from 'lucide-react';
-import type { RustBridgeApprovalRequest } from '@sage-system-app/sdk';
+import type { RustBridgeApprovalRequest } from 'sage-system-app-sdk';
 import { ApprovalDetailRow, ApprovalMetaPill } from './shared';
 
 interface Props {

builtin-apps/src/system/apps/bridge-approval/src/approval/NetworkWhitelistGrantApprovalCard.tsx

@@ -1,4 +1,4 @@
-import type { RustBridgeApprovalRequest } from '@sage-system-app/sdk';
+import type { RustBridgeApprovalRequest } from 'sage-system-app-sdk';
 
 interface Props {
   approval: Extract<

builtin-apps/src/system/apps/bridge-approval/src/approval/SendXchApprovalCard.tsx

@@ -1,5 +1,5 @@
 import { Wallet } from 'lucide-react';
-import type { RustBridgeApprovalRequest } from '@sage-system-app/sdk';
+import type { RustBridgeApprovalRequest } from 'sage-system-app-sdk';
 import { ApprovalDetailRow, ApprovalMetaPill } from './shared';
 
 interface Props {

builtin-apps/src/system/apps/bridge-approval/src/approval/SignCoinSpendsApprovalCard.tsx

@@ -1,5 +1,5 @@
 import { FileSignature } from 'lucide-react';
-import type { RustBridgeApprovalRequest } from '@sage-system-app/sdk';
+import type { RustBridgeApprovalRequest } from 'sage-system-app-sdk';
 import { ApprovalDetailRow, ApprovalMetaPill } from './shared';
 
 interface Props {

builtin-apps/src/system/apps/bridge-approval/src/approval/SignMessageApprovalCard.tsx

@@ -1,5 +1,5 @@
 import { MessageSquareText } from 'lucide-react';
-import type { RustBridgeApprovalRequest } from '@sage-system-app/sdk';
+import type { RustBridgeApprovalRequest } from 'sage-system-app-sdk';
 import { ApprovalDetailRow, ApprovalMetaPill } from './shared';
 
 interface Props {

builtin-apps/src/system/apps/bridge-approval/src/styles.css

@@ -1,4 +1,4 @@
-@import '@sage-app/sdk/theme.css';
+@import 'sage-app-sdk/theme.css';
 @config "../tailwind.config.js";
 
 @tailwind base;

builtin-apps/src/system/apps/donation/package.json

@@ -3,6 +3,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@sage-system-app/sdk": "workspace:*"
+    "sage-system-app-sdk": "workspace:*"
   }
 }

builtin-apps/src/system/apps/donation/src/App.tsx

@@ -1,9 +1,9 @@
-import { AppModalShell } from '@sage-app/ui';
+import { AppModalShell } from 'sage-app-ui';
 import {
   formatSageError,
   useSageSystemClient,
   type DonationDetails,
-} from '@sage-system-app/sdk';
+} from 'sage-system-app-sdk';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { AmountPicker } from './components/AmountPicker';
 import { DeveloperCard } from './components/DeveloperCard';

builtin-apps/src/system/apps/donation/src/components/DeveloperCard.tsx

@@ -1,4 +1,4 @@
-import type { DonationDetails } from '@sage-system-app/sdk';
+import type { DonationDetails } from 'sage-system-app-sdk';
 import { inlineImageSrc } from '../utils';
 
 export function DeveloperCard({ details }: { details: DonationDetails }) {

builtin-apps/src/system/apps/donation/src/styles.css

@@ -1,4 +1,4 @@
-@import '@sage-app/sdk/theme.css';
+@import 'sage-app-sdk/theme.css';
 @config "../tailwind.config.js";
 
 @tailwind base;

builtin-apps/src/system/apps/donation/src/utils.ts

@@ -1,5 +1,5 @@
-import type { AppIcon } from '@sage-app/ui';
-import type { SageAppIconView } from '@sage-system-app/sdk';
+import type { AppIcon } from 'sage-app-ui';
+import type { SageAppIconView } from 'sage-system-app-sdk';
 
 export type DonationMode = 'usd' | 'xch';