@tangle-network/blueprint-ui 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/blueprint-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Shared blueprint UI components, hooks, and contract utilities for Tangle Network apps",
   "license": "MIT OR Apache-2.0",
   "repository": {
@@ -12,9 +12,13 @@
     "url": "https://github.com/tangle-network/blueprint-ui/issues"
   },
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
+    "dist",
     "src",
     "README.md",
     "package.json",
@@ -24,16 +28,37 @@
     "access": "public"
   },
   "exports": {
-    ".": "./src/index.ts",
-    "./components": "./src/components.ts",
-    "./preset": "./src/preset.ts"
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./host": {
+      "import": "./dist/host.js",
+      "types": "./dist/host.d.ts",
+      "default": "./dist/host.js"
+    },
+    "./components": {
+      "import": "./dist/components.js",
+      "types": "./dist/components.d.ts",
+      "default": "./dist/components.js"
+    },
+    "./preset": {
+      "import": "./dist/preset.js",
+      "types": "./dist/preset.d.ts",
+      "default": "./dist/preset.js"
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "build": "tsup && node scripts/build-styles.mjs",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepack": "npm run build"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@nanostores/react": "^0.7.0",
+    "@nanostores/react": "^0.7.0 || ^1.0.0",
     "@radix-ui/react-dialog": "^1.1.0",
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-separator": "^1.1.0",
@@ -44,14 +69,14 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "framer-motion": "^12.0.0",
-    "nanostores": "^0.10.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "nanostores": "^0.10.0 || ^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "react-router": "^7.0.0",
     "sonner": "^2.0.0",
-    "tailwind-merge": "^3.2.0",
+    "tailwind-merge": "^2.6.0 || ^3.2.0",
     "viem": "^2.31.0",
-    "wagmi": "^3.3.0"
+    "wagmi": "^2.19.0 || ^3.3.0"
   },
   "peerDependenciesMeta": {},
   "devDependencies": {
@@ -65,6 +90,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",
+    "@iconify-json/ph": "^1.2.2",
     "blo": "^2.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -75,7 +101,10 @@
     "react-router": "^7.13.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.5.2",
+    "unocss": "^66.5.4",
+    "unocss-preset-animations": "^1.1.1",
     "viem": "^2.46.2",
     "wagmi": "^3.5.0"
   }

package/src/components.ts

@@ -52,3 +52,6 @@ export type { FormSection } from './components/forms/BlueprintJobForm';
 export { BlueprintJobForm } from './components/forms/BlueprintJobForm';
 export { FormSummary } from './components/forms/FormSummary';
 export { JobExecutionDialog } from './components/forms/JobExecutionDialog';
+
+// ── Blueprint Host ──
+export { BlueprintHostHero, BlueprintHostPanel } from './host';

package/src/contracts/abi.ts

@@ -103,6 +103,7 @@ export const tangleServicesAbi = [
               { name: 'totalCost', type: 'uint256' },
               { name: 'timestamp', type: 'uint64' },
               { name: 'expiry', type: 'uint64' },
+              { name: 'confidentiality', type: 'uint8' },
               {
                 name: 'securityCommitments',
                 type: 'tuple[]',
@@ -118,6 +119,14 @@ export const tangleServicesAbi = [
                   { name: 'exposureBps', type: 'uint16' },
                 ],
               },
+              {
+                name: 'resourceCommitments',
+                type: 'tuple[]',
+                components: [
+                  { name: 'kind', type: 'uint8' },
+                  { name: 'count', type: 'uint64' },
+                ],
+              },
             ],
           },
           { name: 'signature', type: 'bytes' },

package/src/contracts/chains.ts

@@ -1,13 +1,14 @@
 import { defineChain } from 'viem';
 import { mainnet } from 'viem/chains';
 import type { Address, Chain } from 'viem';
+import { getEnvVar, isDevEnv } from '../utils/env';
 
 /**
  * Resolve RPC URL for the current environment.
  * Handles local dev (hostname swap), Vite dev proxy, and remote access.
  */
 export function resolveRpcUrl(envUrl?: string): string {
-  const configured = envUrl ?? import.meta.env.VITE_RPC_URL ?? 'http://localhost:8545';
+  const configured = envUrl ?? getEnvVar('VITE_RPC_URL') ?? 'http://localhost:8545';
   if (typeof window === 'undefined') return configured;
   try {
     const rpc = new URL(configured);
@@ -15,7 +16,7 @@ export function resolveRpcUrl(envUrl?: string): string {
     const pageHost = window.location.hostname;
     const isLocalPage = pageHost === '127.0.0.1' || pageHost === 'localhost';
     // Dev-mode proxy for LAN access to local RPC
-    if (isLocalRpc && !isLocalPage && import.meta.env.DEV) {
+    if (isLocalRpc && !isLocalPage && isDevEnv()) {
       return `${window.location.origin}/rpc-proxy`;
     }
     // Non-dev LAN access: swap hostname
@@ -37,7 +38,7 @@ export interface LocalChainOptions {
 }
 
 export function createTangleLocalChain(options: LocalChainOptions = {}) {
-  const chainId = options.chainId ?? Number(import.meta.env.VITE_CHAIN_ID ?? 31337);
+  const chainId = options.chainId ?? Number(getEnvVar('VITE_CHAIN_ID') ?? 31337);
   const localRpcUrl = resolveRpcUrl(options.rpcUrl);
 
   return defineChain({

package/src/contracts/publicClient.ts

@@ -3,8 +3,9 @@ import type { PublicClient } from 'viem';
 import { atom } from 'nanostores';
 import { getNetworks, tangleLocal, type CoreAddresses } from './chains';
 import { persistedAtom } from '../stores/persistedAtom';
+import { getEnvVar } from '../utils/env';
 
-const defaultChainId = Number(import.meta.env.VITE_CHAIN_ID ?? tangleLocal.id);
+const defaultChainId = Number(getEnvVar('VITE_CHAIN_ID') ?? tangleLocal.id);
 
 export const selectedChainIdStore = persistedAtom<number>({
   key: 'bp_selected_chain',

package/src/hooks/useProvisionProgress.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { getEnvVar } from '../utils/env';
 
 // ---------------------------------------------------------------------------
 // Types matching sandbox-runtime/src/provision_progress.rs
@@ -64,7 +65,7 @@ export function useProvisionProgress({
   const [isPolling, setIsPolling] = useState(false);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  const baseUrl = apiUrl ?? import.meta.env.VITE_OPERATOR_API_URL ?? 'http://localhost:9090';
+  const baseUrl = apiUrl ?? getEnvVar('VITE_OPERATOR_API_URL') ?? 'http://localhost:9090';
 
   const fetchProgress = useCallback(async () => {
     if (callId == null) return;

package/src/hooks/useQuotes.ts

@@ -18,6 +18,16 @@ import { resolveOperatorRpc } from '../utils/resolveOperatorRpc';
 
 // ── Types ──
 
+type SecurityCommitment = {
+  asset: { kind: number; token: Address };
+  exposureBps: number;
+};
+
+type ResourceCommitment = {
+  kind: number;
+  count: bigint;
+};
+
 export interface OperatorQuote {
   operator: Address;
   totalCost: bigint;
@@ -28,12 +38,13 @@ export interface OperatorQuote {
     totalCost: bigint;
     timestamp: bigint;
     expiry: bigint;
-    securityCommitments: readonly {
-      asset: { kind: number; token: Address };
-      exposureBps: number;
-    }[];
+    confidentiality: number;
+    securityCommitments: readonly SecurityCommitment[];
+    resourceCommitments: readonly ResourceCommitment[];
   };
   costRate: number;
+  teeAttested?: boolean;
+  teeProvider?: string;
 }
 
 export interface UseQuotesResult {
@@ -49,6 +60,20 @@ export interface UseQuotesResult {
 
 const POW_DIFFICULTY = 20;
 const WEI_PER_TNT = 1_000_000_000_000_000_000; // 10^18
+const RESOURCE_KIND_TO_ID = {
+  CPU: 0,
+  MemoryMB: 1,
+  StorageMB: 2,
+  NetworkEgressMB: 3,
+  NetworkIngressMB: 4,
+  GPU: 5,
+} as const;
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' as Address;
+const DEFAULT_RESOURCE_REQUIREMENTS = [
+  { kind: 'CPU', count: 1 },
+  { kind: 'MemoryMB', count: 1024 },
+  { kind: 'StorageMB', count: 10240 },
+] as const;
 
 function sha256(data: Uint8Array): Uint8Array {
   return viemSha256(data, 'bytes');
@@ -114,6 +139,35 @@ export function formatCost(totalCost: bigint): string {
   return `${tnt.toLocaleString(undefined, { maximumFractionDigits: 2 })} TNT`;
 }
 
+function quoteConfidentiality(requireTee: boolean): number {
+  return requireTee ? 1 : 0;
+}
+
+function resourceKindToId(kind: string): number {
+  const mapped = RESOURCE_KIND_TO_ID[kind as keyof typeof RESOURCE_KIND_TO_ID];
+  if (mapped === undefined) {
+    throw new Error(`Unsupported resource kind in quote: ${kind}`);
+  }
+  return mapped;
+}
+
+function mapJsonSecurityCommitment(sc: any): SecurityCommitment {
+  return {
+    asset: {
+      kind: sc.asset?.kind ?? 0,
+      token: (sc.asset?.token ?? ZERO_ADDRESS) as Address,
+    },
+    exposureBps: sc.exposure_bps ?? 0,
+  };
+}
+
+function mapJsonResourceCommitment(resource: any): ResourceCommitment {
+  return {
+    kind: resourceKindToId(String(resource.kind ?? 'CPU')),
+    count: BigInt(resource.count ?? 0),
+  };
+}
+
 // ── Hook ──
 
 export function useQuotes(
@@ -121,6 +175,7 @@ export function useQuotes(
   blueprintId: bigint,
   ttlBlocks: bigint,
   enabled: boolean,
+  requireTee = false,
 ): UseQuotesResult {
   const [quotes, setQuotes] = useState<OperatorQuote[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -168,6 +223,7 @@ export function useQuotes(
             ttlBlocks,
             proofOfWork: proof,
             challengeTimestamp: timestamp,
+            requireTee,
           });
 
           if (!response) throw new Error('No quote returned from operator');
@@ -194,7 +250,7 @@ export function useQuotes(
     return () => {
       cancelled = true;
     };
-  }, [operators, blueprintId, ttlBlocks, enabled, fetchKey]);
+  }, [operators, blueprintId, ttlBlocks, enabled, fetchKey, requireTee]);
 
   const totalCost = quotes.reduce((sum, q) => sum + q.totalCost, 0n);
 
@@ -213,6 +269,7 @@ async function fetchPriceFromOperator(
     ttlBlocks: bigint;
     proofOfWork: Uint8Array;
     challengeTimestamp: bigint;
+    requireTee: boolean;
   },
 ): Promise<OperatorQuote | null> {
   // Try JSON endpoint (simpler, no protobuf dependency required)
@@ -225,11 +282,8 @@ async function fetchPriceFromOperator(
         ttl_blocks: String(params.ttlBlocks),
         proof_of_work: toHex(params.proofOfWork),
         challenge_timestamp: String(params.challengeTimestamp),
-        resource_requirements: [
-          { kind: 'CPU', count: 1 },
-          { kind: 'MemoryMB', count: 1024 },
-          { kind: 'StorageMB', count: 10240 },
-        ],
+        require_tee: params.requireTee,
+        resource_requirements: DEFAULT_RESOURCE_REQUIREMENTS,
       }),
       signal: AbortSignal.timeout(10_000),
     });
@@ -242,16 +296,17 @@ async function fetchPriceFromOperator(
       totalCost: BigInt(data.total_cost ?? '0'),
       signature: (data.signature ?? '0x') as `0x${string}`,
       costRate: Number(data.cost_rate ?? 0),
+      teeAttested: Boolean(data.tee_attested),
+      teeProvider: data.tee_provider || undefined,
       details: {
         blueprintId: BigInt(data.details?.blueprint_id ?? params.blueprintId),
         ttlBlocks: BigInt(data.details?.ttl_blocks ?? params.ttlBlocks),
         totalCost: BigInt(data.details?.total_cost ?? '0'),
         timestamp: BigInt(data.details?.timestamp ?? params.challengeTimestamp),
         expiry: BigInt(data.details?.expiry ?? '0'),
-        securityCommitments: (data.details?.security_commitments ?? []).map((sc: any) => ({
-          asset: { kind: sc.asset?.kind ?? 0, token: (sc.asset?.token ?? '0x0000000000000000000000000000000000000000') as Address },
-          exposureBps: sc.exposure_bps ?? 0,
-        })),
+        confidentiality: Number(data.details?.confidentiality ?? quoteConfidentiality(params.requireTee)),
+        securityCommitments: (data.details?.security_commitments ?? []).map(mapJsonSecurityCommitment),
+        resourceCommitments: (data.details?.resources ?? []).map(mapJsonResourceCommitment),
       },
     };
   } catch {

package/src/hooks/useSessionAuth.ts

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useSignMessage } from 'wagmi';
 import { getSession, setSession, removeSession, type SessionEntry } from '../stores/session';
+import { getEnvVar } from '../utils/env';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -28,7 +29,7 @@ interface UseSessionAuthOptions {
 }
 
 export function useSessionAuth({ sandboxId, apiUrl }: UseSessionAuthOptions) {
-  const baseUrl = apiUrl ?? import.meta.env.VITE_OPERATOR_API_URL ?? 'http://localhost:9090';
+  const baseUrl = apiUrl ?? getEnvVar('VITE_OPERATOR_API_URL') ?? 'http://localhost:9090';
   const { signMessageAsync } = useSignMessage();
 
   const [isAuthenticating, setIsAuthenticating] = useState(false);

package/src/host/components/BlueprintHostHero.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../../components/ui/card';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { cn } from '../../utils';
+
+type Action = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  variant?: React.ComponentProps<typeof Button>['variant'];
+  disabled?: boolean;
+};
+
+export type BlueprintHostHeroProps = {
+  title: string;
+  tagline?: string;
+  description?: string;
+  badges?: string[];
+  actions?: Action[];
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export function BlueprintHostHero({
+  title,
+  tagline,
+  description,
+  badges = [],
+  actions = [],
+  children,
+  className,
+}: BlueprintHostHeroProps) {
+  return (
+    <Card className={cn('rounded-3xl border-bp-elements-borderColor/70 bg-bp-elements-background-depth-2', className)}>
+      <CardHeader className="space-y-4">
+        {badges.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {badges.map((badge) => (
+              <Badge key={badge} variant="secondary">
+                {badge}
+              </Badge>
+            ))}
+          </div>
+        ) : null}
+        <div className="space-y-2">
+          <CardTitle className="text-3xl">{title}</CardTitle>
+          {tagline ? (
+            <CardDescription className="text-base text-bp-elements-textPrimary/80">
+              {tagline}
+            </CardDescription>
+          ) : null}
+        </div>
+        {description ? (
+          <p className="max-w-3xl text-sm leading-6 text-bp-elements-textSecondary">
+            {description}
+          </p>
+        ) : null}
+      </CardHeader>
+      {(actions.length > 0 || children) && (
+        <CardContent className="space-y-4">
+          {actions.length > 0 ? (
+            <div className="flex flex-wrap gap-3">
+              {actions.map((action) => {
+                const button = (
+                  <Button
+                    key={action.label}
+                    variant={action.variant ?? 'default'}
+                    onClick={action.onClick}
+                    disabled={action.disabled}
+                  >
+                    {action.label}
+                  </Button>
+                );
+
+                return action.href ? (
+                  <a key={action.label} href={action.href}>
+                    {button}
+                  </a>
+                ) : (
+                  button
+                );
+              })}
+            </div>
+          ) : null}
+          {children}
+        </CardContent>
+      )}
+    </Card>
+  );
+}

package/src/host/components/BlueprintHostPanel.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card';
+import { cn } from '../../utils';
+
+export type BlueprintHostPanelProps = {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function BlueprintHostPanel({
+  title,
+  children,
+  className,
+}: BlueprintHostPanelProps) {
+  return (
+    <Card className={cn('rounded-3xl border-bp-elements-borderColor/70 bg-bp-elements-background-depth-2', className)}>
+      <CardHeader>
+        <CardTitle className="text-xl">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/src/host/index.ts

@@ -0,0 +1,42 @@
+export type {
+  BlueprintAppVisibility,
+  BlueprintPublisherVerification,
+  BlueprintExperienceTier,
+  BlueprintSlugPolicy,
+  BlueprintUiSurface,
+  BlueprintResourceRoute,
+  BlueprintPermissionScope,
+  BlueprintExternalAppMode,
+  BlueprintExternalAppTrust,
+  BlueprintPublisher,
+  BlueprintResourceModel,
+  BlueprintPermissionDescriptor,
+  BlueprintExternalAppConfig,
+  BlueprintUiManifest,
+  BlueprintAppModuleBinding,
+  BlueprintAppEntry,
+  BlueprintAppResolvedView,
+} from './types';
+
+export {
+  buildCanonicalBlueprintSlug,
+  resolveBlueprintAppView,
+  toBlueprintAppEntry,
+  getBlueprintExperienceTierLabel,
+  getBlueprintSlugPolicyLabel,
+  getBlueprintSurfaceLabel,
+  getBlueprintPublisherVerificationLabel,
+  getExternalAppTrustLabel,
+  isVerifiedBlueprintPublisher,
+  canPublisherClaimSlug,
+  isTrustedExternalAppHost,
+  getBlueprintPath,
+  getBlueprintServicePath,
+  sanitizeBlueprintSlugPart,
+  deriveBlueprintRequestedSlug,
+} from './resolver';
+
+export type { BlueprintHostHeroProps } from './components/BlueprintHostHero';
+export { BlueprintHostHero } from './components/BlueprintHostHero';
+export type { BlueprintHostPanelProps } from './components/BlueprintHostPanel';
+export { BlueprintHostPanel } from './components/BlueprintHostPanel';